在前端开发过程中会遇到导出文件的需求,在下载点击事件中请求接口,弹窗就是创建a标签,然后转换返回的文件流,给弹窗赋值转换后的url
downloadFile(row) {
this.$axios.get(`url`,{responseType: 'blob'}).then(res=>{
const link = document.createElement("a");
let blob = new Blob([res.data],{ type: 'application/xlsx,charset=utf-8'});
link.style.display = "none";
link.href = URL.createObjectURL(blob)
link.download = row.name + '.xlsx'
document.body.appendChild(link)
//模拟点击事件
link.click()
//移除创建的a标签
window.URL.revokeObjectURL(link.href)
document.body.removeChild(link)
})
}
关于上面这样写下载,还存在token失效的bug,解决方法详见下一篇文章:
vue文件下载请求blob文件流token失效的问题