解决ElementUI中el-table数据导出Excel数据重复两遍的问题
1. vue2.0 + element UI 中 el-table 数据导出Excel前端实现起来很容易,这里推荐一篇博文链接(vue2.0 + element UI 中 el-table 数据导出Excel ),就不多做说明了;照着这个方法是可以实现表格导出功能的,但是导出的Excel有时候确会出现BUG,那就是导出的内容是重复的2遍,效果如下图,这是为什么呢?2.罪魁祸首是: 我使用了el..
·
1. vue2.0 + element UI 中 el-table 数据导出Excel前端实现起来很容易,这里推荐一篇博文链接(vue2.0 + element UI 中 el-table 数据导出Excel ),就不多做说明了;照着这个方法是可以实现表格导出功能的,但是导出的Excel有时候确会出现BUG,那就是导出的内容是重复的2遍,效果如下图,这是为什么呢?
2.罪魁祸首是: 我使用了el-table的fixed属性来让某一列固定,但elementui的实现方式是:创建了两个tabledom,通过一个隐藏一个显示来实现交互效果。当我导出整个el-table 就会将两个div内的table都导出,导致数据重复,审查元素如下:
3.解决方法:
exportExc(){
let fix = document.querySelector('.el-table__fixed');
let wb;
if(fix){ //判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去
wb = XLSX.utils.table_to_book(document.querySelector('#table').removeChild(fix));
document.querySelector('#table').appendChild(fix);
}else{
wb = XLSX.utils.table_to_book(document.querySelector('#table'));
}
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
},
更多推荐
已为社区贡献1条内容
所有评论(0)