Vue2.0---將頁(yè)面中表格數(shù)據(jù)導(dǎo)出excel
Posted on 2017-06-05 11:59 我愛(ài)吃花椒 閱讀(44365) 評(píng)論(35) 收藏 舉報(bào)這不是教程,是隨筆。
項(xiàng)目中將后臺(tái)返回的數(shù)據(jù)v-for到表格中,然后需要將這個(gè)表格導(dǎo)出為EXCEL
只說(shuō)怎么做。
一、需要安裝三個(gè)依賴:
npm install -S file-saver xlsx
npm install -D script-loader
二、項(xiàng)目中新建一個(gè)文件夾:(vendor---名字任取)
里面放置兩個(gè)文件Blob.js和 Export2Excel.js。
百度可下載。
三、在.vue文件中
寫(xiě)這兩個(gè)方法:其中l(wèi)ist是表格的內(nèi)容
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');
const tHeader = ['序號(hào)', 'IMSI', 'MSISDN', '證件號(hào)碼', '姓名'];
const filterVal = ['ID', 'imsi', 'msisdn', '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]))
}
四、按鈕導(dǎo)出調(diào)用export2Excel方法
注:如果webpack報(bào)解析錯(cuò)誤:
在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),
即可解決
alias是配置別名
pass:需要那兩個(gè)文件的可以加我微信 ziheng_joke
浙公網(wǎng)安備 33010602011771號(hào)