在使用elementui做管理平台时遇到导出表格的需求,网上有很多解决方案,最多的就是使用xlsx + FileSaver 将页面上的表格转换成excel book。
// 安装xlsx filesaver
$ npm install --save xlsx file-saver
复制代码
// js 代码
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
// id为要导出的table节点id(父节点也可以),title是导出的表格文件名
export const exportTb = (id, title) => {
/* generate workbook object from table */
var wb = XLSX.utils.table_to_book(document.querySelector(id));
/* get binary string as output */
var wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
});
try {
FileSaver.saveAs(
new Blob([wbout], {
type: 'application/octet-stream'
}),
title
);
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout);
}
return wbout;
};
复制代码
以上 是不是很简单!表格就导出了!但是!!!
我竟然在导出一份表格的时候发现 !一样的数据导了两遍??
把所有的数据全部都查了一遍发现,我的数据没有重复,展示的table也无重复,再查看element table生成的代码发现:
罪魁祸首是: 我使用了el-table的fixed属性来让某一列固定,但elementui的实现方式是:创建了两个tabledom,通过一个隐藏一个显示来实现交互效果。当我导出整个el-table 就会将两个div内的table都导出,导致数据重复。
所以我针对这种情况又做了以下处理:
export const exportTb = (id, title) => {
/* generate workbook object from table */
// 判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去,
var fix = document.querySelector('.el-table__fixed');
var wb;
if (fix) {
wb = XLSX.utils.table_to_book(document.querySelector(id).removeChild(fix));
document.querySelector(id).appendChild(fix);
} else {
wb = XLSX.utils.table_to_book(document.querySelector(id));
}
/* get binary string as output */
var wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
});
try {
FileSaver.saveAs(
new Blob([wbout], {
type: 'application/octet-stream'
}),
title
);
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout);
}
return wbout;
};
复制代码
上述操作用户没有感知,只是在转换时先移除,下一步append,其实直接导出fixed的table也可以,但是不能够兼容其他页面没有使用fixed的表格。所以最终解决方案就是这样。有更好的解决方案欢迎提供~
注意:本文出自 www.inmwang.com,如果要转载本文章,请与作者联系!
并注明来源: www.inmwang.com/detail/5