vue+elementUI，前端导出表格，去除不需要的表格列

遇到的问题：前端导出表格，表格中有些列不需要导出，例如操作列之类的。原理是通过ref获取表格列，把不需要导出的表格列数据去除。

解决方案
①先在elementUI的表格组件上挂一个ref，再通过this.ref.table获取到组件的dom

点击查看代码

<el-table
       :data="form.tableDate"
       ref="table"
       border
></el-table>

②使用封装好的getXlsxFile函数，getXlsxFile在第③步，第三步才是重点

点击查看代码

      let ignoreList = ["操作"];
      let tableList = this.form.tableDate;
      let tableName = "导出表格";
      this.getXlsxFile(this.$refs.table, ignoreList, tableList, tableName);

③使用封装好的getXlsxFile函数

点击查看代码

import XLSX from "xlsx";
import FileSaver from "file-saver";

//处理表格数据
//tableRef-表格的ref值
//ignoreList-忽略导出列，例如['操作','产品操作']，表示操作、产品操作这一列不导出
//tableDate-表格数据
//tableName-导出的文件名
//colsList-表格列宽，没有就按默认列宽导出，例如：[{ wch: 5 },{ wch: 5 },...]
//mergesList-合并规则,例如[[e:{r:4,c:0},s:{r:3,c:0}],...]，表示第1列的第4个格子向第1列的第5个格子合并
export function getXlsxFile(tableRef, ignoreList, tableDate, tableName, colsList = [], mergesList = []) {
    let enHeader = [];//英文表头
    let zhHeader = [];//中文表头
    //将表格的dom节点转换成可遍历的数组
    var tableTitle = tableRef.$el
        .querySelector(".el-table__header-wrapper")
        .querySelector(".has-gutter")
        .querySelector("tr").childNodes;
    for (let index0 = 0; index0 < tableTitle.length; index0++) {
        if (
            !ignoreList.includes(
                tableTitle[index0].textContent
            )
        ) {
            //如果不在忽略导出列表，则加到中文表头
            zhHeader.push(tableTitle[index0].textContent);
            for (
                let index1 = 0;
                index1 < tableRef.$children.length;
                index1++
            ) {
                //对应在tableRefName.$children找到和中文匹配的属性英文名
                if (
                    tableRef.$children[index1].label ===
                    tableTitle[index0].textContent
                ) {
                    enHeader.push(tableRef.$children[index1].prop);
                    break;
                }
            }
        } else {
        }
    }
    //定义xlsx的表头，是表格的第一行即中文表头
    let xlsxList = [zhHeader];
    //循环表格数据，将每一行表格数据添加到xlsxList中
    tableDate.map((item, index0) => {
        xlsxList[index0 + 1] = [];
        //按照每行数据都按照定义的英文表头排序
        for (let index1 = 0; index1 < enHeader.length; index1++) {
            xlsxList[index0 + 1].push(item[enHeader[index1]]);
        }
    });
    var wb = XLSX.utils.book_new(); //创建一个空的工作簿
    wb.SheetNames.push(tableName); //加入第一个工作表
    wb.Sheets[tableName] = XLSX.utils.aoa_to_sheet(xlsxList); //给第一个工作表赋值
    wb.Sheets[tableName]["!cols"] = colsList
    wb.Sheets[tableName]["!merges"] = mergesList;


    /* 获取二进制字符串作为输出 */
    var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
    });
    try {
        XLSX.writeFile(wb, tableName);
    } catch (error) {
        console.log("error:", error)
        this.msgWarning("导出文件错误，请联系管理员")
    }
}

码字不易，转载请注明出处，谢谢~