對于涉及到資料比較多的管理背景導出excel 表格這個需求就非常的常見了
是以？
vue 怎麼到處excel表格的？
有兩種辦法
1：請求接口背景直接給你的是excel檔案，你需要做的就是怎麼接收excel 表格，
2：就是請求背景接口給你傳回的json資料，你需要生成excel表格，然後導出來，
在這裡我講一下第二種辦法
廢話不說直接教程：
一：需要安裝依賴：
npm install -S file-saver xlsx
npm install -D script-loader
二：引入兩個js
Blob.js和 Export2Excel.js。
可以建立一個檔案夾，放進去
Blob.js和 Export2Excel.js檔案：連結: http://pan.baidu.com/s/1nvSdw85 密碼: 5qhi
三：需要兩個方法
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel'); ---require 括号裡面是相對路徑其實是引用 Export2Excel.js
const tHeader = ['序号', 'IMSI', 'MSISDN', '證件号碼', '姓名']; ----tHeader 數組裡面放的是字段的對應名
const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name']; -----filterVal 字段對應的值
const list = this.tableData; ----對應的json數組
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]))
}
四：按鈕導出 調用 export2Excel方法
注：如果webpack報解析錯誤：
在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),
即可解決
alias是配置别名
還有一個問題：就是
上述有個Export2Excel.js它引用了 Blob.js 是以你要把那個 require( )的路徑改成相對路徑；完了再調用方法就可以了如下圖：
注意：不要忘記引用這兩個js，因為你要用人家的控件就要先引入才能用哦！！在入口檔案main.js或者在元件裡面單獨引用都可以，我是直接在main.js引用的；
參考文獻：http://www.cnblogs.com/Mrfan217/p/6944238.html