el-table表格导出Excel+选中导出+导出重复

1、实现导出Exsel

可选中导出，也可以直接导出当前页

导出的xlsx最终效果

Element组件库中的el-table表格导出需要的主要是两个依赖:(xlsx 和 file-saver)

1.安装相关依赖

npm install --save xlsx file-saver

2·组件里头引入

// 引入导出Excel表格依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";

3·给el-table加一个ID 定义导出事件

//定义导出表格触发事件
    exportExcel() {
      let wb = XLSX.utils.table_to_book(document.querySelector("#table"), {
          raw: true,//如果表格里有数字、日期这些、需要加上raw: true
        });
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          // Blob 对象表示一个不可变、原始数据的类文件对象。
          new Blob([wbout], { type: "application/octet-stream" }),
          // 设置导出文件名称
          "统计核算.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }

这时候导出表格就实现了！！！！

2、导出Exsel数据重复

这个主要是使用了el-table固定列添加了fixed属性，el-ui团队的实现方式是创建两个table定位显示影藏实现，导致导出数据是重复的两组，解决方式找到带有.fixed类名的表格，如果有，转换excel时先将该dom移除

//定义导出Excel表格事件
    exportExcel() {
      // 解决生成重复数据-因为使用l fixed属性 注意你的fixed是left还是right
      var fix = document.querySelector("#daochu2 .el-table__fixed-right");
      var wb;
      // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去
      if (fix) {
        /* 从表生成工作簿对象 */
        wb = XLSX.utils.table_to_book(
          document.querySelector("#table").removeChild(fix),
          { raw: true }
        );
        document.querySelector("#table").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#table"), {
          raw: true,
        });
      }
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          // 设置导出文件名称
          "统计核算.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }

3、实现选中导出

选中导出在查阅相关资料后，感觉较为复杂，参考文章https://blog.csdn.net/Principal_Z/article/details/102869532
最后想到一个非常简单的实现方式：

通过el-table里的@selection-change时间就可以直接拿到用户选中的数据数组

1.拿到选中数据 这里用selectList接收存起来

//表格选中事件回调
    handleSelectionChange(val) {
      //选中批量导出的 给导出专用表格赋值数据
      this.selectList = val; //选中数据
    }

2.把展示的表格复制一份 让这个表格的data=选中的数据 另起一个ID 使用css定位或者透明度隐藏起来

这样我们选中的数据就在第二个隐藏的表格里 导出时导出第二个表格的数据即可实现选中导出！

image.png

其他参考文章
表格导出Excel表格https://www.jianshu.com/p/1971fc5b97ca
选中导出https://blog.csdn.net/Principal_Z/article/details/102869532