downloadFile(res,fileName) {
const blob = new Blob([res], {type: 'application/json'})
// 通过fileReader读取这个blob
const reader = new FileReader()
// 将blob对象以文本的方式读出,读出完成后将会执行onload方法
reader.readAsText(blob)
reader.onload = e => {
const textRes = e.target.result
// 此处对fileReader读出的结果进行JSON解析
// 可能会出现错误,需要进行捕获
try {
const json = JSON.parse(textRes)
if (json) {
// 解析成功说明后端导出出错,进行导出失败的操作 例如展示后端返回的失败提示
alert(json.errMsg)
return
}
} catch (err) {
// 该异常无法将字符串转为json
// 说明返回数据是一个流文件
// 不需要处理该异常
}
// 如果代码能够执行到这里,说明后端给的是一个流文件
// 这里可以获取header中的cotent-type设置对应的type即可下载不同类型的文件
let blob = new Blob([res], {type: 'application/ms-excel'}) // excel
if (window.navigator.msSaveOrOpenBlob) {
// 兼容IE & Edge
navigator.msSaveOrOpenBlob(blob,fileName)
} else {
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL
// 创建下载链接
const downloadHref = url.createObjectURL(blob)
// 创建a标签并为其添加属性
let donwnloadLink = document.createElement('a')
donwnloadLink.style.display = 'none'
donwnloadLink.href = downloadHref
donwnloadLink.download = fileName
// 触发点击事件执行下载
// 火狐浏览器上a标签点击导出无效。解决办法:需要先将a标签添加到当前页面上,在执行click,之后再移除该节点,而不能直接执行click
document.body.appendChild(donwnloadLink)
donwnloadLink.click()
// 下载完成进行释放
url.revokeObjectURL(donwnloadLink.href)
document.body.removeChild(donwnloadLink)
}
}
}
下载各类文件流的方法(兼容各个浏览器,包含错误信息处理)
最新推荐文章于 2024-03-04 14:33:10 发布