【接口是get請求，返回的是文件流】
1.【a標簽下載】點擊a標簽的時候嘉栓，瀏覽器自動彈出下載的確認框
<a :href="downLoadUrl+n.advancePaymentBillingId">下載賬單</a>
能夠看到自動下載的文件名稱熙涤，這個文件名稱我沒有做任何設置脓钾，應該是文件流中自帶的
2.【調接口下載】
export function download(url,data={}){
console.log(data)
axios({
method:"GET",
url:baseURL + url,
responseType:'blob',
headers: {
'Content-Type':'application/json',
'Authorization' :window.sessionStorage.getItem('token')
}
}).then((res) => {
var blob =new Blob([res], {type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'})
var downloadElement =document.createElement('a');
var href =window.URL.createObjectURL(blob)//創(chuàng)建下載的鏈接
? ? ? ? ? downloadElement.href =href;
//導出有新舊2種獲取文件名的方式
? ? ? ? ? if(res.headers['content-disposition']){
var str = res.headers['content-disposition']
var arr =str.split("=");
var num =arr[1];
let formatString =escape(num)
downloadElement.download =decodeURI(formatString)
}else{
downloadElement.download = data.fileName +'.xls' //下載的文件名 ?注意：加.xls是兼容火狐瀏覽器
? ? ? ? ? }
document.body.appendChild(downloadElement);
downloadElement.click();//點擊下載
? ? ? ? ? document.body.removeChild(downloadElement);//下載完成移除元素
? ? ? ? ? window.URL.revokeObjectURL(href);//釋放掉blob對象
? ? ? ? ? if(this.loading !='' ||this.loading !=null ||this.loading !=undefined){
this.loading =false;
}
}).catch(error => {
console.log(error)
if(this.loading !='' ||this.loading !=null ||this.loading !=undefined){
this.loading =false;
}
})
}
vue頁面
//下載賬單
downloadBill(){
let {agentName,totalResult}=this;
let str=totalResult.billingStartTime.replace(/[\u4e00-\u9fa5|,]+/g,'')? +? '-'? +? totalResult.billingEndTime.replace(/[\u4e00-\u9fa5|,]+/g,'')
//設置下載后的文件的名稱
//拼接上名稱
//日期從表頭的賬期時間炬藤，取值虽界。表頭的賬期時間接口返回的格式是摄乒，startTime：2022年3月22日歹袁；endTime：2022年3月24日枷餐。我用正則去掉了中文靶瘸。且兩個日期用【中橫線】這個字符來連接
let post_data={
fileName:agentName+'_賬單_'+str
? }
this.$download('alliance-billing/platformProfitSharingAgentBilling/downloadAgentProfitSharingBill/'+the_billid,post_data).then((res) => {
let data=res.data;
}).catch(err=>{
})
},
