业务需要
要实现一个文件下载性能,这个下载的文件是后盾依据数据处理之后返回的数据流,并且如果文件无奈下载,或者是打包文件时出现异常,数据流外面间接返回异样,前段须要输入异样提醒。
解决思路
为了实现这样的需要,想到了用 Blob
去接收数据,而后应用 FileReader
去读取无奈下载的文件的异样返回,可能下载的文件则走下载的流程(如果是 IE10 以上的浏览器,则运行 navigator.msSaveBlob(blob, filename)
; 如果是其余 chrome 内核的浏览器,则通过创立 a 标签的模式来进行下载)
Internet Explorer 10 的 msSaveBlob 和 msSaveOrOpenBlob 办法容许用户在客户端上保留文件,办法如同从 Internet 下载文件,这是此类文件保留到“下载”文件夹的起因。对于 msSaveBlob 与 msSaveOrOpenBlob
代码
export async function apiOutputSelfMarkTable(agr = {}) {
// 获取 token
let token = window.localStorage.getItem('token')
// 定义接口 api
let url = '/proxy/fydj/perfCheck/exportSelfMarkTable'
// 发送申请
axios({
method: 'post', // post 办法
url,
data: agr,
responseType: 'blob',
headers: {Authorization: token,},
})
.then(async res => {const blob = new Blob([res.data])
// 判断是否为数据流文件,如果不是则输入谬误起因,// 如果是则下载该文件
if (res.data.type !== 'application/octet-stream') {let reader = new FileReader()
reader.readAsText(blob)
// 因为 render.readAsText()是异步的,// 所以上面必修调用 onload 来加载之前输入的后果
reader.onload = function () {
// 读取结束后输入后果
message.error(this.result)
}
return
} else {
// 定义正则
let negx = new RegExp('attachment;filename=', 'g')
let Str = res.headers['content-disposition']
// 获取文件名称
let filename = decodeURI(Str.replace(negx, ''))
if ('download' in document.createElement('a')) {
// 非 IE 下载
const elink = document.createElement('a')
elink.download = filename
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 开释 URL 对象
document.body.removeChild(elink)
console.log('下载第二步')
} else {
// IE10+ 下载
navigator.msSaveBlob(blob, filename)
}
}
})
.catch(err => {console.log(err)
})
}
readAsText
办法能够将 Blob 或者 File [](https://developer.mozilla.org… 对象转依据非凡的编码格局转化为内容(字符串模式)这个办法是 异步 的,也就是说,只有当执行实现后才可能查看到后果,如果间接查看是无后果的,并返回 undefined
也就是说必须要挂载 实例下的 onload 或 onloadend 的办法解决转化后的后果 (引自 MDN 文档)