vue2.0+element-ui+js-xlsx.js+fil

标签： Vue element-ui

原文：https://blog.csdn.net/WYA1993/article/details/85319138

如果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;
}