在vue中導出excel表格

初學者學習vue開發，想把前端項目中導出Excel表格，查了眾多帖子，踩了很多坑，拿出來與大家分享一下經驗。

1. 安裝依賴

   //npm 
   npm install file-saver -S 
   npm install xlsx -S
   npm install -D script-loader

2. 導入兩個JS文件

   Blob.js和Export2Excel.js 在src目錄下新建vendor文件夾（文件名最好別改，否則你會有無窮無盡的麻煩，大神除外！），里面放入Blob.js和Export2Excel.js兩個JS文件。目錄大概是這樣的：

   

   案說法

3.  在main.js中引入兩個包

   import Blob from './vendor/Blob'
   import Export2Excel from './vendor/Export2Excel.js'

4. 修改Export2Excel.js

   不好說，上圖：

   

   主要把路徑修改到你自己文件的位置

5. 在你要導出文件的這個vue頁面中寫2個方法

   export2Excel(){
             require.ensure([], () => {
               const { export_json_to_excel } = require('./vendor/Export2Excel');
               //頭
               const tHeader = [ '時間', '地址', '姓名'];
               //對應的標簽
               const filterVal = ['date', 'address', 'name'];
               //標簽對應的內容  是一個數組結構            
               const list = this.tableData;
               //一個方法 我也不知道干嘛的
               const data = this.formatJson(filterVal, list);
               export_json_to_excel(tHeader, data, '列表excel');
             })
           },
   formatJson(filterVal, jsonData){
       return jsonData.map(v => filterVal.map(j => v[j]))
   },                        

   一個按鈕  去觸發expert2Excel()  這個函數就ok了

6. 備注

    第一次寫可能不太明白，整合了一個講的不錯例子的鏈接，分享一下：

   https://www.cnblogs.com/myfirstboke/p/8243800.html

   https://www.jb51.net/article/129695.htm

   https://www.jianshu.com/p/3f78590ba194

   https://www.jb51.net/article/149084.htm