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

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

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

点击查看代码

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

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

点击查看代码

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

③使用封装好的getDataToXlsxFile函数

点击查看代码

import XLSX from "xlsx";

/*
getDataToXlsxFile：根据数组导出文件
tableRef-表格的ref值
ignoreList-忽略导出列，例如['操作','产品操作']，表示操作、产品操作这一列不导出
tableData-表格数据
tableName-导出的文件名
colsList-表格列宽，没有就按默认列宽导出，例如：[{ wch: 5 },{ wch: 5 },...]
mergesList-合并规则,例如[[e:{r:4,c:0},s:{r:3,c:0}],...]，表示第1列的第4个格子向第1列的第3个格子合并
sortList-排序规则,有些表格是右侧固定，导出时又需要排在前面。填写规则:[{"location:"定位字段1",field:"排序字段1"，fieldEn:"排序字段属性名1"}...]
*/
export function getDataToXlsxFile(tableRef, ignoreList, tableData, tableName, colsList = [], mergesList = [], sortList = []) {
    let enHeader = [];//英文表头
    let zhHeader = [];//中文表头
    tableRef.columns.map((column) => {
        if (column.label && !ignoreList.includes(column.label)) {
            enHeader.push(column.property)
            zhHeader.push(column.label)
        }
    })
    if (sortList.length > 0) {
        sortList.map((data) => {
            for (let index2 = 0; index2 < zhHeader.length; index2++) {
                // console.log("index2", index2)
                if (zhHeader[index2] === data.location) {
                    // console.log("test", index2, zhHeader[index2], data.location)
                    zhHeader.splice(index2, 0, data.field)
                    enHeader.splice(index2, 0, data.fieldEn)
                    index2++
                }
                else if (zhHeader[index2] === data.field) {
                    zhHeader.splice(index2, 1)
                    enHeader.splice(index2, 1)
                }
            }
        })
    }
    if (colsList.length === 0) {
        zhHeader.map((label) => {
            colsList.push({ wch: label.length * 2 })
        })
    }
    //定义xlsx的表头，是表格的第一行即中文表头
    let xlsxList = [zhHeader];
    //循环表格数据，将每一行表格数据添加到xlsxList中
    tableData.map((item, index0) => {
        xlsxList[index0 + 1] = [];
        //按照每行数据都按照定义的英文表头排序
        for (let index1 = 0; index1 < enHeader.length; index1++) {
            xlsxList[index0 + 1].push(item[enHeader[index1]]);
        }
    });
    //清空被合并项的数值，避免用户操作下载的excel时，修改合并项后，被合并项还保留原值
    if (mergesList.length > 0) {
        mergesList.map((mergesItem) => {
            // console.log('mergesItem', mergesItem)
            for (let ri = mergesItem.s.r; ri < mergesItem.e.r + 1; ri++) {
                // console.log('ri', ri)
                for (let ci = ri === mergesItem.s.r ? mergesItem.s.c + 1 : mergesItem.s.c; ci < mergesItem.e.c + 1; ci++) {
                    // console.log('ci', ci)
                    xlsxList[ri][ci] = undefined
                }
            }
        })
    }
    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;
    writeFile(wb, tableName + "-" + Date.now() + ".xlsx")
}

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