标签： Vue element-ui
如果element-ui的table使用了fixed属性固定列，导出表格时会出现导出两次的问题，是因为在table中有两个table标签，我们可以通过代码解决这个问题，注意代码中拷贝了一个table元素，否则直接删除会删除页面中的表格
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
output(tableID, excName) {
/* generate workbook object from table */
let table = document.querySelector("#" + tableID).cloneNode(true);
// 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
table.removeChild(table.querySelector(".el-table__fixed"))
let wb = XLSX.utils.table_to_book(table, { raw: true });//mytable为表格的id名
/* get binary string as output */
let wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
excName + ".xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}
