Vue+Element 实现导出El-Table表格数据

1.首先先安装依赖

npm install --save xlsx file-saver

2、在放置需要导出功能的组件中引入

import { saveAs } from 'file-saver'

import XLSX from 'xlsx'

3.给el-table增加一个id标签

对应exportExcel方法中的 document.querySelector(‘#exportTab’)

例:

<el-table id="exportTab">
//这里是自己渲染的表格数据
</el-table>

4、在methods中设置导出转换excel表格的方法，如下

 exportExcel() {
      this.getList(); //这个是重新2加载表格,意思是每次点击导出的时候都要重新加载一次表格以确定是否在导出前新增了表格内的数据。

       //settimeout:延迟加载 如果不延迟一点加载则会出现导出的数据不是最新的。
      setTimeout(() => {
        /* generate workbook object from table */
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)

      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        saveAs.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '供应商价格表.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      }, 1000);
      return wbout
    }

5.自己随便写个按钮点击事件测试即可

6.可能会遇到的问题

1. 如果表格存在分页，导出时却只导出当前table页绑定的数据，假如我们设置的table每页只有10条数据，但是总共有20条数据,这时导出就只导出了当前table页面的10条数据，并非所有的表格数据,这里就有一种最简单粗暴的方法:

        在Vue页面代码中再加一个el-table标签，这个table专门用来导出数据,不做分页处理，且此table一直隐藏着，这样导出的就是全部数据了。这样的话代码看起来会很多很乱,建议自定义组件后到页面直接引用,看起来会简洁一些。

附原文地址:https://blog.csdn.net/weixin_45792953/article/details/111660751