之前工作遇到后台下载文件时会直接跳转到无权限页面,导致用户体验不好
原因:后台使用stream传递,当无权限时提示无权限,当成功时下载文件
前端是直接使用window.location.href进行下载,所以出现问题
解决:
- 先用接口请求下载地址
- 如果返回失败,则直接提示错误
- 如果成功则创建Blob进行下载
downloadBlob(url) {
downloadByUrl(url).then((res) => {
let { data } = res
if (data.type === 'application/json') {
let reader = new FileReader()
reader.addEventListener('loadend', () => {
const { message } = JSON.parse(reader.result)
this.$message.error(message || '下载失败')
})
reader.readAsText(data, 'utf-8')
} else {
let blob = new Blob([data])
let elink = document.createElement('a')
elink.download = data.attachSaveName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
}
})
}