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里写一个方法

// 请把代码文本粘贴到下方(请勿用图片代替代码)
先是点击事件
{{$t('public.fileSaver')}}

下面是方法
/导出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生成的代码发现:

vue+element的table数据导出为excel教程_第1张图片

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

你可能感兴趣的:(web大前端)