发现在elementui使用xlsx导出excel时会有重复的数据

发布时间 2023-07-21 15:42:21作者: 妞妞猪

原因是由于elementui中的固定列产生的影响,

doExportExcel(){//导出为excel
        let wb = ''
        let xlsxParam = { raw: true }
        let fix = document.querySelector(".el-table__fixed-right")
        if (fix) {
          wb = XLSX.utils.table_to_book(
            document.querySelector("#tableData").removeChild(fix),
            xlsxParam
          );
          document.querySelector("#tableData").appendChild(fix);
        } else {
          wb = XLSX.utils.table_to_book(document.querySelector("#tableData"),xlsxParam);
        }
        /* 获取二进制字符串作为输出 */
        let wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
            "发票信息.xlsx"
        );
          this.$message({
            type: 'success',
            message: '已成功导出!'
          })
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      },
 
其中的.el-table__fixed-right是固定列的class,然后通过wb中移除掉固定列进行处理。另外,我发现 xlsxParam这个参数是用来处理保存后excel表单的单元格格式的,如果去了这个,导出excel后的数据格式会有问题。
参考 https://blog.csdn.net/qq_17162169/article/details/121263935