vue+element的table数据导出为excel教程
相关代码1、 安装相关依赖主要是两个依赖npm install --save xlsx file-saver如果想详细看着两个插件使用,请移步github。https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js2、组件里头引入 import FileSaver from ...
相关代码
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属性全部去掉。
更多推荐
所有评论(0)