Vue結(jié)合后臺(tái)詳解導(dǎo)入導(dǎo)出Excel問題
一連十六卦,卦卦皆無(wú)你,罷了,殺了那算命的~
今天講講 前臺(tái)Vue配合后臺(tái)(java)導(dǎo)出Excel 后臺(tái)返回的數(shù)據(jù)是 二進(jìn)制文件流 如何將此變?yōu)?彈框下載
當(dāng)時(shí)開發(fā)呢,我們后臺(tái)是java 有控件 可以直接將數(shù)據(jù)導(dǎo)出并生成Excel文件,但是前后臺(tái)傳輸是不可能直接傳輸文件的,是以二進(jìn)制文件流進(jìn)行傳輸?shù)?此時(shí)呢就會(huì)遇到一個(gè)問題,因?yàn)槭呛笈_(tái),必然會(huì)涉及到權(quán)限,權(quán)限就涉及到token,token傳輸就會(huì)出現(xiàn)限制問題,所以我會(huì)列出三種方法
我的是Vue項(xiàng)目~~
- 不需要token的方法
<template>
<div>
<el-button @click="downloadFile" type="primary">導(dǎo)出 Excel</el-button>
<iframe id="ifile" style="display:none"></iframe>
</div>
</template>
<script>
methods:{
// 導(dǎo)出 Excel
downloadFile() {
var dom=document.getElementById('ifile');
dom.src= this.downloadFileUrl +`/pay/exportExcel?userId=${this.form.userId}&orderNumber=${this.form.orderNumber}&stime=${this.form.stime}&etime=${this.form.etime}&status=${this.form.status}&payChannel=${this.form.payChannel}`;
}
},
</script>
這個(gè)的意思呢就是寫一個(gè)類似的隱藏域 ifram 標(biāo)簽獨(dú)有的特性 , 不明白的可以去W3cschool 查一查, 后面拼接的參數(shù)就是導(dǎo)出條件,按個(gè)人需要進(jìn)行,這個(gè)親測(cè)有效!
2.第二種就涉及到token了 , 就是使用javascript的內(nèi)置對(duì)象來(lái)解析,方法就是使用axios請(qǐng)求 請(qǐng)求過(guò)來(lái)的二進(jìn)制文件流進(jìn)行解析
// 導(dǎo)出 Excel
downloadFile() { // 這是methods中的方法
downLoadPayListFn({...this.form}).then(res => { // 這個(gè)是我封裝的方法 就是通過(guò)axios請(qǐng)求進(jìn)行攔截 添加token form是data中的數(shù)據(jù) 也就是篩選條件
const fileName = '測(cè)試表格123.xls';
if ('download' in document.createElement('a')) { // 非IE下載
const blob = new Blob([res], {type: 'application/ms-excel'});
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 釋放URL 對(duì)象
document.body.removeChild(elink);
}
})
},
這個(gè)blob是js的內(nèi)置對(duì)象 就是將其轉(zhuǎn)化為文件 詳情解釋可以去查 blob
import fetch from 'utils/fetch';
import Qs from 'qs';
// 導(dǎo)出數(shù)據(jù)
export function downLoadPayListFn(obj) {
return fetch({
url: '/admin/pay/exportExcel',
method: 'get',
params: obj,
responseType: 'blob',
/* header: {
'Content-Type': "application/x-www-form-urlencoded; charset=utf-8"
} */
});
}
在這里一定要加上 responseType: 'blob',否則不會(huì)生效 切記!!!!
看網(wǎng)上寫的是這個(gè)樣子 當(dāng)然也根據(jù)后臺(tái)返回給你的數(shù)據(jù)進(jìn)行展示 餓哦們后臺(tái)返回的數(shù)據(jù)沒有進(jìn)行包裝 所以直接就是response,搞就完事了.
3.第三種方法 使用form 表單提交 隱藏域使用
<template>
<div id="rechargeRecord">
<!-- 支付管理 -->
<div class="title">
<el-form label-width="100px">
<form class="form" :action="downloadFileUrl+`/pay/exportExcel`" method="post">
<input type="hidden" name="userId" :value="form.userId"> <!-- 用戶id -->
<input type="hidden" name="orderNumber" :value="form.orderNumber"> <!-- 訂單單號(hào) -->
<input type="hidden" name="stime" :value="form.stime"> <!-- 時(shí)間 -->
<input type="hidden" name="etime" :value="form.etime"> <!-- 時(shí)間 -->
<input type="hidden" name="status" :value="form.status"> <!-- 交易狀態(tài)（1開始，2進(jìn)行中融欧，3失敗霎苗，4成功） -->
<input type="hidden" name="type" :value="form.type"> <!-- 支付類型（1.扣除 2.返還 3.轉(zhuǎn)換 4.贈(zèng)送） -->
<input type="hidden" name="ctimeState" :value="form.ctimeState"> <!-- 創(chuàng)建時(shí)間狀態(tài)（1：正序、2：倒序） -->
<input type="hidden" name="payChannel" :value="form.payChannel"> <!-- 支付渠道 -->
<input type="hidden" name="token" :value="token"> <!-- 支付渠道 -->
<input type="submit" value="導(dǎo)出 Excel" @click="submitBtn(event)" class="submit" >
</form>
</el-form>
</div>
</div>
</template>
<script>
import { getPayListFn, downLoadPayListFn } from 'api/game/money/rechargeRecord';
import { mapGetters } from "vuex";
import { getToken } from "utils/auth.js"; // 這是我自己封裝的方法 獲取token的方法
export default {
data(){
return{
form: {
pageIndex: 1, // 當(dāng)前頁(yè)數(shù)
pageSize: 10, //請(qǐng)求行數(shù)
userId: '', // 用戶id
orderNumber: '', // 訂單單號(hào)
stime: '', // 創(chuàng)建時(shí)間（開始）
etime: '', // 創(chuàng)建時(shí)間（結(jié)束）
status: '', // 交易狀態(tài)（1開始窟社，2進(jìn)行中，3失敗绪钥，4成功）
type: '', // 支付類型（1.扣除 2.返還 3.轉(zhuǎn)換 4.贈(zèng)送）
ctimeState: '', // 創(chuàng)建時(shí)間狀態(tài)（1：正序灿里、2：倒序）
payChannel: '', // 支付渠道
},
token: getToken() , // 這里獲取token
}
},
// 頁(yè)面一加載的時(shí)候
created() {
this.getdata();
},
methods:{
submitBtn(e) {
e.preventDefault(); // 這個(gè)必須要有, 不然不生效
return false; // 這個(gè)必須要有, 不然不生效
}
},
}
</script>
<style rel="stylesheet/scss" scoped>
.form {
display: inline-block;
border-color: #20a0ff;
margin-left: 0.6rem;
}
.submit {
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #c4c4c4;
color: #1f2d3d;
margin: 0;
padding: 10px 15px;
border-radius: 4px;
border-color: #20a0ff;
}
</style>
這個(gè)就需要后臺(tái)配合配置一下網(wǎng)關(guān),如果有header中有token的話就去header中取 沒有的話就去參數(shù)中取,這個(gè)親測(cè)好使,
這里附上我的qq : 2489757828 有問題可以咨詢我
我的私人博客 李大玄
一見鐘情太膚淺
日久生情太蒼白
別人眉來(lái)眼去
我呀 只偷看你一眼！
在這里插入圖片描述
