Vue element-ui 裡面的table匯出excel表格 步驟

使用element-ui el-table這個元件，

第一步： 安裝element-ui的環境

npm i element-ui -S

第二步： 匯出表格的依

npm install --save xlsx file-saver

第三步 新增一個類名或id名或ref

<el-table  id="table" :data="tdata4"  height="405"  border style="width: 100%">
//定義一個id或者類名都可以，只要能取到 ，ref這個也是可以的

第四步： 新增一個事件

<button @click="exportExcel">匯出資料</button>

第五步：需要使用的頁面匯入

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

第六步： 匯出資料

 //匯出資料
      exportExcel () {
        let wb = XLSX.utils.table_to_book(document.querySelector('#table'));   // 這裡就是表格
        let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
        try {
          FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'table.xlsx');  //table是自己匯出檔案時的命名，隨意
        } catch (e)
        {
          if (typeof console !== 'undefined')
            console.log(e, wbout)
        }
        return wbout
      },

ok!