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 },