Vue实现将table数据导出excel到本地

* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。
* @author Alan
* @Email no008@foxmail.com

Vue实现将table数据导出excel到本地

正文

Vue实现将table数据导出excel到本地

在 Vue 中，要导出 el-table 中的数据为 Excel 格式，可以使用一些第三方库，如 file-saver 和 xlsx。具体步骤如下：

第一步

安装 file-saver 和 xlsx 库：

npm install --save xlsx file-saver

第二步

在需要导出数据的组件中引入这两个库：

import FileSaver from 'file-saver'
  import XLSX from 'xlsx'

第三步

在 el-table 中添加一个 id属性，

<el-table class="el-table" id="exportTable" :data="tableData" ...>
        <!-- 表格列定义 -->
        </el-table>

第四步

添加一个按钮或链接，用于触发导出事件，并在事件处理程序中编写代码：

 <el-button type="danger" size="small" @click=" exportToExcel()">导出<el-icon class="el-icon--right">
              <upload />
             </el-icon>
           </el-button>

第五步

在methods中写入方法

exportToExcel() {
        const XLSX = require('xlsx')
         console.log('XLSX', XLSX, FileSaver)
         // 使用 this.$nextTick 是在dom元素都渲染完成之后再执行
        this.$nextTick(function () {
           // 设置导出的内容是否只做解析，不进行格式转换     false：要解析， true:不解析
          const xlsxParam = { raw: true }
           const wb = XLSX.utils.table_to_book(document.querySelector('#exportTable'), xlsxParam)
           // 导出excel文件名
          let fileName = '牛只数据表' + new Date().getTime() + '.xlsx'

          const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
          try {
            // 下载保存文件
            FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName)
           } catch (e) {
             if (typeof console !== 'undefined') {
               console.log(e, wbout)
             }
           }
           return wbout
         })
      },