vue中把table導出表格excel

1.首先下載2個js，我的百度網盤有

2.安裝依賴

 npm install -S file-saver xlsx（這里其實安裝了2個依賴）

 npm install -D script-loader

 

3.項目中新建一個文件夾：（vendor---名字任取）

你在哪個頁面用導出這個功能，也可以直接跟這個頁面同級新建這個文件夾

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

 

//        導出excle的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]))
 },

5.點擊導出按鈕調用這個方法--》export2Excel

this.export2Excel()

6.如果報錯的話
在build----webpack.base.conf.js中resolve的alias加入 'vendor':path.resolve(__dirname,'../src/views/Sign/vendor'),即可解決
這個路徑根據實際來調

這個js里面也要根據實際路徑來相對的調整

7.導出結果（你想要啥子結果就去這個方法里面去配置啊）
之前一直有個問題，日媽的原來是老眼昏花把ths.tableData 沒換成我自己的表格數組 ，所以數據源這里要注意換，如果你要導出全部數據的話 分頁那里選擇 +9999這樣就可以全部導出了

 BUG:當數據過大時，導出的excel可能為空？為啥呢？應為

應為ajax默認是異步請求，當你請求完畢這個導出js后，說不定你導出按鈕調的接口還沒跑完，所以可能導致請求的數據為空，導出的excel也只有頁頭，要么寫promise,要么寫在請求數據的里面，成功了在調excel這個js