vue + element UI 中 el-table 資料匯出Excel表格

單頁表格匯出

最近寫的一個後臺VUE專案需要把表格裡的資料匯出到Excel中，這是第一次接觸這個功能，查了一下資料，發現了一個比較簡單又快捷得方法：
1、 安裝相關依賴

主要是兩個依賴:(xlsx 和 file-saver)
npm install --save xlsx file-saver

2、引入兩個js檔案

在src目錄下新建excel資料夾，裡面放入Blob.js和Export2Excel.js兩個JS檔案（外掛自己去找）

3、在元件頭裡邊引入外掛(測試的時候，下邊程式碼放到入口js檔案main.js的時候沒有效果，遺留問題，有待解決)（放到元件頭裡邊能夠實現效果）

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

4、在對應元件裡邊methods裡邊寫一個方法

exportExcel () {
    /* generate workbook object from table */
     let xlsxParam = { raw: true } // 匯出的內容只做解析，不進行格式轉換
     let wb = XLSX.utils.table_to_book(document.querySelector('#rebateSetTable'), xlsxParam);
     /* get binary string as output */
     let 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
 },

ps： #rebateSetTable是el-table的元件新增了一個id （自己定義），xxx.xlsx是下載的Excel表格的名字（可修改的）

5、點選匯出按鈕執行 exportExcel 的方法即可

<el-button @click="exportExcel"  size="medium" type="success">匯出</el-button>