安裝依賴
進入項目文件夾，打開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)代碼
點擊導出按鈕
<el-button type="primary" class="mt_0 ml_1em? bg_gray_777" @click="exportClick()">導出賬單</el-button>
實現(xiàn)查詢方法
在methods中
//報表導出前的查詢
????? 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這個列表，用于當作導出Excel的數(shù)據(jù)源
?//開始執(zhí)行導出方法，此方法要放在括號里面，因為是異步請求數(shù)據(jù)，請求完才能執(zhí)行導出
?this.export2Excel()
}).catch(error => {
????????? debugger;
?this.loading =?false
? ? ? ? ?console.log(error)
??????? })
??????? },
執(zhí)行以上代碼要在data中添加exportList[]：
data(){
return{
//要導出的報表的list
??????? exportList:[],
}
}
說明：
以上代碼用來請求后臺來獲取一個要顯示內容的list，但是為了快速實現(xiàn)效果，可以自己聲明一個list，如下
導出Excel代碼
繼上面執(zhí)行查詢數(shù)據(jù)后，開始執(zhí)行導出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è)務需求設置的。
2.const filterVal ：這是excel下面對應標題頭要顯示的具體內容，要與list中的相對應，比如簡單版本中與id、title等對應。
?? 如果是請求后臺返回一個實體類的list，那么這個要與實體類的屬性相對應。
3.?export_json_to_excel(tHeader, data, '**賬單報表'+moment(new Date()).format('YYYYMMDDHHmmss'))如果要修改導出報表的名字，就將
??? **賬單報表修改成自己需要的，后面的是要實現(xiàn)時間戳，通過moment來將當前時間進行格式化為時間字符串，防止導出時重名。
4.關于導出的Excel具體顯示的內容，就是要給它傳遞一個list，不管是自己手動編寫list，還是請求后臺返回的list。只需要修改
‘const list = ’這個后面的內容給list 賦值即可。通過修改還可以將Element ui中的表格中data屬性所對應list進行導出，從而實現(xiàn)將表格導出為Excel的操作。
?? 但是這樣只能導出一頁的數(shù)據(jù)，所以要重新編寫請求后臺的接口。來返回一個list用于前端導出Excel。
效果
