【接口是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)//创建下载的链接
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=>{
})
},
