需求:点击下载按钮调用接口下载文件,文件名为headers中content-disposition里的fileNmae
一开始从网络请求中可以看到响应体content-disposition,但是打印response.headers[“content-disposition”]为undefined,后面查到需要后端设置response.setHeader(“Access-Control-Expose-Headers”, “Content-Disposition”) 前端才能正常取到值
我们这个项目封装了Axios请求,所以不好取header,这里单独封装了下载文件的方法
exportExcel(){
const headers = {
'content-type': 'application/vnd.ms-excel',
'X-Access-Token': token, //token
}
Axios({
method: "get",
url: this.exportXlsUrl, //接口地址
params: this.queryParam, // 你的传参
headers: headers,
responseType: "blob", // 指定获取数据的类型为blob
}).then(
function (response) {
var fileName = decodeURIComponent(response.headers["content-disposition"].split("=")[1])
const data = response.data;
if (!data) {
this.$message.warning('文件下载失败')
return
}
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName)
} else {
const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
const link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link) // 下载完成移除元素
window.URL.revokeObjectURL(url) // 释放掉blob对象
}
}
).catch(function (err) {
console.log(err)
})
},