vue 通过 Blob实现异步下载文件
前言:我是使用 vue-element-admin 里面统一封装了,请求配置和 响应 拦截器.通过 window.open(url) 的方式,下载失败不但不能拿到错误信息,而且 还会跳页面.体验很差.于是使用了,blob 的方式异步下载文件.代码:// 下载文件的具体方法,data 是异步响应体,fileName是文件名download (data,fil...
·
前言:
我是使用 vue-element-admin 里面统一封装了,请求配置 和 响应 拦截器.
通过 window.open(url) 的方式,下载失败不但不能拿到错误信息,而且 还会跳页面.
体验很差.于是使用了,blob 的方式异步下载文件.
代码:
// 下载文件的具体方法,data 是异步响应体,fileName是文件名
download (data,fileName) {
if (!data || data.code==500) { return }
let url = window.URL.createObjectURL(new Blob([data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
document.body.removeChild(link); // 下载完成移除元素
window.URL.revokeObjectURL(url); // 释放掉blob对象
},
// 调用上面的方法,下载文件
downLoadFile(url,fileName,loadingName){
this[loadingName] = true
// 这里是异步请求
this.$api.utils.down(url,{}).then(res=>{
this.download(res,fileName)
this[loadingName] = false
})
}
更多推荐
已为社区贡献5条内容
所有评论(0)