vue+elementui 導出table為xlsx表格

第一步：安裝所需要的的依賴模塊

cnpm i file-saver --save  
cnpm i xlsx --save

 

第二步：在需要導出的頁面引入以下兩個模塊

import FileSaver from "file-saver";
import XLSX from "xlsx";

 

第三步：給table添加一個Id

<el-table id="table" :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名"  width="180"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

<button @click="exportExcel">導出數據</button>

 

第四部分：js

  exportExcel() {
      var xlsxParam = { raw: true }; // 導出的內容只做解析，不進行格式轉換(添加此行代碼表格中的百分比就不會再導出的時候被轉換成小數點)
      let wb = XLSX.utils.table_to_book(
        document.querySelector("#table"),
        xlsxParam
      );
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      // 獲取當前的時間戳，用來當文件名
      let time = new Date().getTime();
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          `${time}.xlsx`
        ); //${time}是自己導出文件時的命名，隨意
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },