问题背景
通过接口下载文件的时候,后端设置的responseHeader
content-disposition: attachment;filename= 文件名.xlsx
content-type: application/vnd.ms-excel;charset=utf-8
前端接口申请的时候,设置responseType: 'blob'
,后端接口间接返回的是文件流。
而后当下载文件异样的状况下,接口间接返回的“文件下载出错”的文字,这个时候业务组件内拿到的返回信息曾经被转化成 blob
格局了,所有须要把 blob
转成 string
,用来提醒用户下载异样。
代码展现
申请响应拦挡解决
获取文件流、文件名、文件后缀信息
// content-disposition: attachment;filename= 文件名.xlsx
const contentDisposition = response.headers['content-disposition']
const _fileName = contentDisposition.split('=')[1]
const fileType = _fileName.substring(_fileName.lastIndexOf('.')); // .xlsx
const fileName = _fileName.substring(0, _fileName.lastIndexOf('.')); // 文件名
if (fileName && fileType) {
return {
data: response.data,
fileName,
fileType
}
}
定义工具函数
因为把 blob
转成 string
须要用 FileReader
去读取,FileReader
是异步的,所以这里须要用 Promise
返回,不便业务组件同步调用
export const downloadFile = (srcData, fileName='下载', fileType='.xls', target='_self') {var blob = new Blob([srcData])
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) // 开释资源
}
}
export const blobToString = (blobData) => {return new Promise((resolve) => {if (blobData instanceof Blob) {const reader = new FileReader();
reader.readAsText(blobData, 'utf-8')
reader.onload = function () {resolve(reader.result || '')
}
} else {resolve('')
}
})
}
业务组件调用
// 省略局部代码
async down() {
try {const res = await API();
const {data, fileName, fileType, code} = res || {}
if (code === -1) {const result = await blobToString(data)
this.$message.error(result)
return
}
downloadFile(data, fileName, fileType)
} catch (err) {console.log(err)
}
}
我是 甜点 cc☭
公众号:【看见另一种可能】