使用场景：后端response传的是文件流
// 文件下载 - (不传文件名则取后端定义的文件名)
export const downloadFileNew = (url, fileName) => {
const xhr = new XMLHttpRequest()
xhr.open('get', url)
xhr.responseType = 'blob'
xhr.setRequestHeader('Authorization', getToken()) // 权限验证，视情况修改
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
const name =
fileName ||
xhr.getResponseHeader('Content-Disposition').split('filename=')[1]
// 支持IE浏览器
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(this.response, name)
return
}
const href = window.URL.createObjectURL(this.response)
const link = document.createElement('a')
link.style.display = 'none'
link.href = href
link.setAttribute('download', name)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}
xhr.send()
}
异常情况处理：
如果xhr.getResponseHeader('Content-Disposition')出错，出现获取不到响应头的情况，则可能是后端没有设置该值的获取权限。
在后端加上该值的权限即可：
context.Response.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
