Vue-解决使用xlsx库导出elementUI表格出现数据重复的问题

问题描述

网上有很多表格的导出的方法,但是我发现,出现了element历史遗留的数据重复的问题
出现了下图的情况

解决方法

1.先上代码

将导出方法写成一个全局方法,可以多处使用

//导出文件工具类
import FileSaver from "file-saver";
import XLSX from "xlsx";
/**
 * 
 * @param {String} id 表格id,类名为.class id为#id
 * @param {String} title  要导出的excel表格名称
 */
export const exportTable = (id, title) => {
    //  .table要导出的是哪一个表格
    let table = document.querySelector(id).cloneNode(true);
    // 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
    table.removeChild(table.querySelector(".el-table__fixed-right"));
    table.removeChild(table.querySelector(".el-table__fixed"));
    let wb = XLSX.utils.table_to_book(table, { raw: true }); //mytable为表格的id名
    /* get binary string as output */
    var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
    });
    try {
        FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            title + ".xlsx"
        );
    } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
    }
    return wbout;
}

2.解决思路

因为element-ui的表格的fixed属性导致多出一个table,而我的表格是有两个fixed属性的
我的html代码如下,一个fixed, 一个fixed='right'

 <el-table-column prop="orderNo"  label="订单号" fixed></el-table-column>
 <el-table-column label="操作" width="120" fixed="right"></el-table-column>

 //  .table要导出的是哪一个表格
    let table = document.querySelector(id).cloneNode(true);
    console.log('表格', table);

使用cloneNode方法复制dom,在后续删除节点的时候不会操作页面的DOM

别人的文章element表格是生成了两个table,但是我是生成了三个,参考文章之后,我发现不能删除
el-table__fixed-right，或是el-table__fixed,都还是会出现重复

所以这两行代码重中之重~
删除节点

table.removeChild(table.querySelector(".el-table__fixed-right"));
table.removeChild(table.querySelector(".el-table__fixed"));

3.最后效果