vue+element的table数据导出为excel教程

相关代码

1、 安装相关依赖

主要是两个依赖

npm install --save xlsx file-saver
如果想详细看着两个插件使用，请移步github。

https://github.com/SheetJS/js-xlsx 
https://github.com/eligrey/FileSaver.js

2、组件里头引入

    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
3、组件methods里写一个方法

// 请把代码文本粘贴到下方（请勿用图片代替代码）
先是点击事件
<el-button type="primary" @click="fileSaver()">{{$t('public.fileSaver')}}</el-button>

下面是方法
/导出table数据为excel/

      fileSaver(){
          this.$nextTick(function () {
              let wb = XLSX.utils.table_to_book(document.querySelector('.tb-edit'));
              let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
              try {
                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '学生信息.xlsx')
              } catch (e) {
                if (typeof console !== 'undefined') console.log(e, wbout)
              }
              return wbout;
          });
      },

注意：这样会有问题(你会发现你的表格被打印了三遍)：

我竟然在导出一份表格的时候发现 ！一样的数据导了两遍？？

把所有的数据全部都查了一遍发现，我的数据没有重复，展示的table也无重复，再查看element table生成的代码发现：

罪魁祸首是： 我使用了el-table的fixed属性来让某一列固定，但elementui的实现方式是：创建了两个tabledom，通过一个隐藏一个显示来实现交互效果。当我导出整个el-table 就会将两个div内的table都导出，导致数据重复。
解决办法:将elementui表格中的fixed属性全部去掉。