前景
在导出文件的时候,有时候会返回blob文件流的数据,而不是返回URL地址,对于这种场景,下面谈谈其应用。
应用
在window挂载下载文件的方法
window.downFile = function (resBlob, fileName, fileType = '.xls', target = '_self') {
var blob = new Blob([resBlob], {
type: 'application/vnd.ms-excel;charset=utf-8'
})
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
// 兼容IE/Edge
window.navigator.msSaveOrOpenBlob(blob, fileName + fileType)
} else {
var url = window.URL.createObjectURL(blob)
var a = document.createElement('a')
a.href = url
a.target = target
a.style.display = 'none'
a.setAttribute('download', fileName + fileType)
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
window.URL.revokeObjectURL(url)
}
}
在使用axios请求的时候,加上responseType: 'blob'
入参
const res = await this.$http({ data: {}, responseType: 'blob'})
window.downFile(res.blob, '文件下载')
兼容
使用window.URL.createObjectURL创建Blob链接区别
- IE生成不带域名的blob:链接
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
blob:8279D2BD-AA94-410D-B5D1-3DFD881E49D9
- chrome生成带有当前域名的标准blob:链接
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36
blob:http://localhost:8080/9f3a8b63-02a7-43e5-865b-9a54051040a7
- edge生成带有当前域名的标准blob:链接,却下载不了,然而存在window.navigator.msSaveOrOpenBlob方法,使用该方法创建Blob链接可以下载
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362
blob:http://localhost:8080/a05dd411-e25a-4f19-9c70-715a0f0b05c6