File-Saver外掛：El-Table表格資料匯出到Excel表格

阿新 • • 發佈：2021-06-28

一、引入外掛

　　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;
      }