通用导出el-table表格内容的方法

目录

一、方法说明

二、需要的引用

三、具体代码展示

---

一、方法说明

        本方法可以根据id(表格ID)、title(导出表格标题)、delcol（移除列名称）等属性设置进行导出，会自动移除多选框以及相关button，只导出表格内容。

二、需要的引用

        import FileSaver from "file-saver";

        import XLSX from "xlsx";

三、具体代码展示

function exportDelCols(id, title, delcol) {
    // 获取当前table的dom,必须要用clone，如果不可隆的话会导致你现有表中的表格发生改变
    let tableDom = document.querySelector("#" + id).cloneNode(true);
    let tableHeader = tableDom.querySelector('.el-table__header-wrapper');
    let tableBody = tableDom.querySelector('.el-table__body');
    tableHeader.childNodes[0].append(tableBody.childNodes[1]);
    let headerDom = tableHeader.childNodes[0].querySelectorAll('th');
    // 移除左侧checkbox的节点
    var checks = headerDom[0].querySelectorAll('.el-checkbox');
    if (checks.length > 0) {
        headerDom[0].remove();
    }
    for (let key in headerDom) {
        if (headerDom[key].innerText === delcol) {
            headerDom[key].remove();
        }
    }

    // 清理掉checkbox 和操作的button
    let tableList = tableHeader.childNodes[0].childNodes[2].querySelectorAll('td');
    for (let key = 0; key < tableList.length; key++) {
        if (tableList[key].querySelectorAll('.el-checkbox').length > 0 || tableList[key].querySelectorAll('.el-button').length > 0) {
            tableList[key].remove();
        }
    }

    // 获取web的节点
    let webBook = XLSX.utils.table_to_book(tableHeader);
    // 把当前的book节点写入XLSX中
    let webOut = XLSX.write(webBook, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
    });
    try {
        FileSaver.saveAs(new Blob([webOut], {
            type: 'application/octet-stream'
        }), title + '.xlsx');
    } catch (e) {
        if (typeof console !== 'undefined') console.log(e, webOut)
    }
    return webOut
}