安裝依賴
進(jìn)入項(xiàng)目文件夾正歼，打開cmd或者在Webstorm中的Terminal中輸入：
npm?install -S?file-saver xlsx
npm?install -D script-loader
添加js文件
下載所需的兩個(gè)文件：Blob.js兔朦、Export2Excel.js
https://download.csdn.net/download/badao_liumang_qizhi/10767801
新建vendor懒浮，名稱不一定非是vendor抄肖，建議但不非得將此目錄放在與單頁(yè)面同級(jí)的目錄淹仑。將上面兩個(gè)js文件放在vendor目錄中显押。
比如：
這里要使用的單頁(yè)面是merchantBIllFlow.vue,所以在此同級(jí)目錄下新建vendor目錄柳洋，將上面兩個(gè)js文件放在此目錄下警检。
修改配置文件
在項(xiàng)目目錄下的build下的 webpack.base/conf.js這個(gè)webpack的配置文件中的
resolve的alias中加入：
'vendor':path.resolve(__dirname,'../src/views/account/vendor'),
具體路徑根據(jù)實(shí)際而寫孙援，這里是按照我的方式寫的路徑。
如下：
實(shí)現(xiàn)代碼
點(diǎn)擊導(dǎo)出按鈕
<el-button type="primary" class="mt_0 ml_1em? bg_gray_777" @click="exportClick()">導(dǎo)出賬單</el-button>
實(shí)現(xiàn)查詢方法
在methods中
//報(bào)表導(dǎo)出前的查詢
????? exportClick(){
?this.loading =?true;//緩沖條加載
//此代碼實(shí)現(xiàn)向后臺(tái)異步請(qǐng)求數(shù)據(jù)
exportMerchantBill(this.billForm).then(response => {
?this.loading =?false;
const?data = response.data;//聲明常量data用來(lái)接收后臺(tái)返回的數(shù)據(jù)data
?this.exportList =?data;//將接受到的data數(shù)據(jù)賦給exportList這個(gè)列表扇雕，用于當(dāng)作導(dǎo)出Excel的數(shù)據(jù)源
?//開始執(zhí)行導(dǎo)出方法拓售，此方法要放在括號(hào)里面，因?yàn)槭钱惒秸?qǐng)求數(shù)據(jù)洼裤，請(qǐng)求完才能執(zhí)行導(dǎo)出
?this.export2Excel()
}).catch(error => {
????????? debugger;
?this.loading =?false
? ? ? ? ?console.log(error)
??????? })
??????? },
執(zhí)行以上代碼要在data中添加exportList[]：
data(){
return{
//要導(dǎo)出的報(bào)表的list
??????? exportList:[],
}
}
說(shuō)明：
以上代碼用來(lái)請(qǐng)求后臺(tái)來(lái)獲取一個(gè)要顯示內(nèi)容的list邻辉，但是為了快速實(shí)現(xiàn)效果溪王，可以自己聲明一個(gè)list，如下
導(dǎo)出Excel代碼
繼上面執(zhí)行查詢數(shù)據(jù)后值骇，開始執(zhí)行導(dǎo)出Excel的方法： this.export2Excel()
在methods中新建方法：
繼上面請(qǐng)求后臺(tái)數(shù)據(jù)的版本
?methods: {
????? export2Excel() {
?require.ensure([], () => {
?const { export_json_to_excel } =?require('vendor/Export2Excel');
?const tHeader =
['賬單名稱',?'訂單編號(hào)',?'交易編號(hào)','交易類型',
?'交易方式','交易金額','交易前金額',?'交易后金額'
??????????? ];
?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,?'**報(bào)表'+moment(new?Date()).format('YYYYMMDDHHmmss'));
??????? })
????? },
????? formatJson(filterVal, jsonData) {
?return jsonData.map(v => filterVal.map(j => v[j]))
????? },
簡(jiǎn)單的版本
methods: {
? ? ?export2Excel() {
?require.ensure([], () => {
?const { export_json_to_excel } =?require('vendor/Export2Excel');
?const tHeader =
??????????? [
'編號(hào)',?'標(biāo)題',?'作者','回顧',?'時(shí)間'? ??
??????????? ];
?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,?'**賬單報(bào)表'+moment(new?Date()).format('YYYYMMDDHHmmss'));
??????? })
????? },
????? formatJson(filterVal, jsonData) {
?return jsonData.map(v => filterVal.map(j => v[j]))
????? },
說(shuō)明：
1.const tHeader：這是excel表中要顯示的標(biāo)題頭莹菱，即最上面那一行，這是根據(jù)具體業(yè)務(wù)需求設(shè)置的吱瘩。
2.const filterVal ：這是excel下面對(duì)應(yīng)標(biāo)題頭要顯示的具體內(nèi)容道伟，要與list中的相對(duì)應(yīng)，比如簡(jiǎn)單版本中與id使碾、title等對(duì)應(yīng)蜜徽。
?? 如果是請(qǐng)求后臺(tái)返回一個(gè)實(shí)體類的list，那么這個(gè)要與實(shí)體類的屬性相對(duì)應(yīng)票摇。
3.?export_json_to_excel(tHeader, data, '**賬單報(bào)表'+moment(new Date()).format('YYYYMMDDHHmmss'))如果要修改導(dǎo)出報(bào)表的名字拘鞋，就將
??? **賬單報(bào)表修改成自己需要的，后面的是要實(shí)現(xiàn)時(shí)間戳矢门，通過moment來(lái)將當(dāng)前時(shí)間進(jìn)行格式化為時(shí)間字符串盆色，防止導(dǎo)出時(shí)重名。
4.關(guān)于導(dǎo)出的Excel具體顯示的內(nèi)容祟剔，就是要給它傳遞一個(gè)list隔躲，不管是自己手動(dòng)編寫list，還是請(qǐng)求后臺(tái)返回的list物延。只需要修改
‘const list = ’這個(gè)后面的內(nèi)容給list 賦值即可宣旱。通過修改還可以將Element ui中的表格中data屬性所對(duì)應(yīng)list進(jìn)行導(dǎo)出，從而實(shí)現(xiàn)將表格導(dǎo)出為Excel的操作叛薯。
?? 但是這樣只能導(dǎo)出一頁(yè)的數(shù)據(jù)浑吟，所以要重新編寫請(qǐng)求后臺(tái)的接口。來(lái)返回一個(gè)list用于前端導(dǎo)出Excel案训。
效果
