其他分享
首页 > 其他分享> > vue+elementUI,前端导出表格,去除不需要的表格列

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 {
        FileSaver.saveAs(
            new Blob([wbout], {
                type: "application/octet-stream",
            }),
            //设置导出文件名称
            tableName + "-" + Date.now() + ".xlsx"
        );
    } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
    }
    return wbout;
}

标签:vue,表格,elementUI,导出,tableName,let,index0,index1
来源: https://www.cnblogs.com/loveniko/p/16386161.html