问题场景
在前后端分离项目中 , 后端添加请求头信息，头存放文件下载名称以及日期等信息，在前端执行下载事件时，发现封装Download.js报错，原因在于头content-disposition获取失败。
发现问题
后端设置请求头信息：
response.setHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");
前端下载事件
<a-button icon="export" :loading="exporting" @click="() => {
this.exporting = true;
Download(this.axios.get(this.$Api.*.*.exportCostFinance, {
responseType: 'arraybuffer',
params: {
company: this.form.company === 0 ? 0 : this.form.company || -1,
department: this.form.department || 0,
branchOffice: this.form.branchOffice || 0,
startMonth: this.form.startMonth && this.form.startMonth.format('YYYY/MM/01') || '',
endMonth: this.form.endMonth && this.form.endMonth.endOf('month').format('YYYY/MM/DD') || '',
}
})).finally(() => this.exporting = false);
}">导出</a-button>
封装Download.js
function Download(request) {
return new Promise((resolve, reject) => {
request.then(res => {
console.log(res)
let filename = res.headers['content-disposition'].replace('attachment;filename=', '');
let conentType = res.headers['content-type'];
const blob = new Blob([res.data], {type: conentType});
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
window.navigator.msSaveBlob(blob, decodeURI(filename))
} else {
// 创建新的URL并指向File对象或者Blob对象的地址
const blobURL = window.URL.createObjectURL(blob)
// 创建a标签，用于跳转至下载链接
const tempLink = document.createElement('a')
tempLink.style.display = 'none'
tempLink.href = blobURL
tempLink.setAttribute('download', decodeURI(filename))
// 兼容：某些浏览器不支持HTML5的download属性
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
// 挂载a标签
document.body.appendChild(tempLink)
tempLink.click()
document.body.removeChild(tempLink)
// 释放blob URL地址
window.URL.revokeObjectURL(blobURL)
}
resolve(res);
}).catch(res => {
reject(res);
});
});
}
export {
Download
}
点击下载事件，content-disposition头信息实际上没有，Download.js报错，下载失败。
解决问题
response.addHeader("Content-Disposition", "attachment;filename=" + fileName + ".xlsx");
response.setHeader("Access-Control-Expose-Headers","Content-Disposition");
重启项目，再次点击下载事件，下载成功。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/137101.html
