版權(quán)聲明：本文為博主原創(chuàng)文章亲善，遵循 CC 4.0 by-sa 版權(quán)協(xié)議冗疮，轉(zhuǎn)載請附上原文出處鏈接和本聲明棺滞。
本文鏈接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83789067
安裝依賴
進入項目文件夾蝌戒，打開cmd或者在Webstorm中的Terminal中輸入：
npm install -S file-saver xlsx
npm install -D script-loader
添加js文件
下載所需的兩個文件：Blob.js设凹、Export2Excel.js
https://download.csdn.net/download/badao_liumang_qizhi/10767801
新建vendor贸街，名稱不一定非是vendor庵寞，建議但不非得將此目錄放在與單頁面同級的目錄。將上面兩個js文件放在vendor目錄中薛匪。
比如：
這里要使用的單頁面是merchantBIllFlow.vue,所以在此同級目錄下新建vendor目錄捐川，將上面兩個js文件放在此目錄下。
修改配置文件
在項目目錄下的build下的 webpack.base/conf.js這個webpack的配置文件中的
resolve的alias中加入：
'vendor':path.resolve(__dirname,'../src/views/account/vendor'),
具體路徑根據(jù)實際而寫逸尖，這里是按照我的方式寫的路徑古沥。
如下：
實現(xiàn)代碼
點擊導(dǎo)出按鈕
<el-button type="primary" class="mt_0 ml_1em? bg_gray_777" @click="exportClick()">導(dǎo)出賬單</el-button>
實現(xiàn)查詢方法
在methods中
//報表導(dǎo)出前的查詢
????? exportClick(){
??????? this.loading = true;//緩沖條加載
????????//此代碼實現(xiàn)向后臺異步請求數(shù)據(jù)
??????? exportMerchantBill(this.billForm).then(response => {
????????? this.loading = false;
????????? const data = response.data;//聲明常量data用來接收后臺返回的數(shù)據(jù)data
????????? this.exportList = data;//將接受到的data數(shù)據(jù)賦給exportList這個列表，用于當作導(dǎo)出Excel的數(shù)據(jù)源
????????? //開始執(zhí)行導(dǎo)出方法娇跟，此方法要放在括號里面岩齿，因為是異步請求數(shù)據(jù)，請求完才能執(zhí)行導(dǎo)出
????????? this.export2Excel()
??????? }).catch(error => {
????????? debugger;
????????? this.loading = false
????????? console.log(error)
??????? })
??????? },
執(zhí)行以上代碼要在data中添加exportList[]：
data(){
return{
//要導(dǎo)出的報表的list
??????? exportList:[],
}
}
說明：
以上代碼用來請求后臺來獲取一個要顯示內(nèi)容的list苞俘，但是為了快速實現(xiàn)效果盹沈，可以自己聲明一個list，如下
導(dǎo)出Excel代碼
繼上面執(zhí)行查詢數(shù)據(jù)后吃谣，開始執(zhí)行導(dǎo)出Excel的方法： this.export2Excel()
在methods中新建方法：
繼上面請求后臺數(shù)據(jù)的版本
?methods: {
????? export2Excel() {
??????? require.ensure([], () => {
????????? const { export_json_to_excel } = require('vendor/Export2Excel');
????????? const tHeader =
??????????? ['賬單名稱', '訂單編號', '交易編號','交易類型',
????????????? '交易方式','交易金額','交易前金額', '交易后金額'
??????????? ];
????????? const filterVal =
??????????? ['transactionName', 'orderNum','transactionNum','transactionTypeName',
???????????? 'payType','payPrice', 'transactionFrontPrice', 'transactionAftertPrice',
??????????? ];
????????? const list = this.exportList;
??????????const data = this.formatJson(filterVal, list);
??????????export_json_to_excel(tHeader, data, '**報表'+moment(new Date()).format('YYYYMMDDHHmmss'));
??????? })
????? },
????? formatJson(filterVal, jsonData) {
??????? return jsonData.map(v => filterVal.map(j => v[j]))
????? },
簡單的版本
methods: {
????? export2Excel() {
??????? require.ensure([], () => {
????????? const { export_json_to_excel } = require('vendor/Export2Excel');
????????? const tHeader =
??????????? [
?????????? ?'編號', '標題', '作者','回顧', '時間'????
??????????? ];
????????? const filterVal =
??????????? ['id', 'title','author','pageviews','display_time'];??
?????????? const list =
????????? ?[
???????????? {id: 1, title: 2, author: 3, pageviews: 4, display_time: 5},
???????????? {id: 6, title: 7, author: 8, pageviews: 9, display_time: 10},
???????????? {id: 11, title: 12, author: 13, pageviews: 14, display_time: 15},
??????????? ];
????????? const data = this.formatJson(filterVal, list);???????
????????? export_json_to_excel(tHeader, data, '**賬單報表'+moment(new Date()).format('YYYYMMDDHHmmss'));
??????? })
????? },
????? formatJson(filterVal, jsonData) {
??????? return jsonData.map(v => filterVal.map(j => v[j]))
????? },
說明：
1.const tHeader：這是excel表中要顯示的標題頭乞封，即最上面那一行，這是根據(jù)具體業(yè)務(wù)需求設(shè)置的岗憋。
2.const filterVal ：這是excel下面對應(yīng)標題頭要顯示的具體內(nèi)容肃晚，要與list中的相對應(yīng)，比如簡單版本中與id澜驮、title等對應(yīng)陷揪。
?? 如果是請求后臺返回一個實體類的list惋鸥，那么這個要與實體類的屬性相對應(yīng)杂穷。
3.?export_json_to_excel(tHeader, data, '**賬單報表'+moment(new Date()).format('YYYYMMDDHHmmss'))如果要修改導(dǎo)出報表的名字，就將
??? **賬單報表修改成自己需要的卦绣，后面的是要實現(xiàn)時間戳耐量，通過moment來將當前時間進行格式化為時間字符串，防止導(dǎo)出時重名滤港。
4.關(guān)于導(dǎo)出的Excel具體顯示的內(nèi)容廊蜒，就是要給它傳遞一個list趴拧，不管是自己手動編寫list，還是請求后臺返回的list山叮。只需要修改
‘const list = ’這個后面的內(nèi)容給list 賦值即可著榴。通過修改還可以將Element ui中的表格中data屬性所對應(yīng)list進行導(dǎo)出，從而實現(xiàn)將表格導(dǎo)出為Excel的操作屁倔。
?? 但是這樣只能導(dǎo)出一頁的數(shù)據(jù)脑又，所以要重新編寫請求后臺的接口。來返回一個list用于前端導(dǎo)出Excel锐借。
效果
原文鏈接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83789067
