File-Saver插件：El-Table表格数据导出到Excel表格

一、引入插件

　　1、npm命令引入插件依赖：

cnpm install --save xlsx file-saver

　　

　　2、页面引入

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

二、使用插件导出数据

　　1、给El-Table加id：

<!-- 表格1 -->
<el-table :data="tableData" border height="750px" id="table1">
    <el-table-column :prop="item.value" :key="item.value" :label="item.label" v-for="item in column" v-if="item.show" :width="item.width"></el-table-column>
</el-table>
<!-- 表格2 -->
<el-table :data="tableData" border height="750px" id="table2">
    <el-table-column :prop="item.value" :key="item.value" :label="item.label" v-for="item in column" v-if="item.show" :width="item.width"></el-table-column>
</el-table>

　　2、触发导出事件：

　　（1）参数method为需要导出的表格id；

　　（2）经过去除fixed元素操作来避免数据因为El-Table里的分表而重复导出；

　　（3）wb = XLSX.utils.table_to_book(table,{raw:true})中的raw:true表示不自动获取格式，统一按照文本格式导出，可以有效避免超过12位的数字导出后变成科学记数法的问题。

　　　　handleExportVue(method){
        // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，避免导出的数据重复
        let fixRight = document.querySelector("#"+method).querySelector('.el-table__fixed-right');
        let fixLeft = document.querySelector("#"+method).querySelector('.el-table__fixed-left');
        let wb = null;
        let table = document.querySelector("#"+method);
        if (fixRight || fixLeft) {
          if(fixRight){
            table = table.removeChild(fixRight);
          }
          if(fixLeft){
            table = table.removeChild(fixLeft);
          }
          wb = XLSX.utils.table_to_book(table,{raw:true});
          if(fixRight){
            document.querySelector("#"+method).appendChild(fixRight);
          }
          if(fixLeft){
            document.querySelector("#"+method).appendChild(fixLeft);
          }
        } else {
          wb = XLSX.utils.table_to_book(table,{raw:true});
        }
        //获取二进制字符串作为输出
        let wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          if(method == 'table1'){
            //设置导出文件名称
            FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), "表格1.xlsx");
          }else if(method == 'table2'){
            //设置导出文件名称
            FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), "表格2.xlsx");
          }
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      }

　　

__EOF__

本文作者：我命倾尘
本文链接：https://www.cnblogs.com/guobin-/p/14866661.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！