對於涉及到數據比較多的管理后台導出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