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
         })
      },

                        
原文链接：https://blog.csdn.net/weixin_45904654/article/details/131331445