admin管理员组文章数量:1566638
前言
本次主要分享一下前端如何保存后端返回文件流到本地,是否为vue项目均可。
关键点:
- axios
- URL.createObjectURL
实现思路:
首先设置axios的响应类型为 responseType: 'blob' ,也就把流文件转换成blob对象;其次用window.URL.createObjectURL()方法生成一个blob对象的url(暂且这么描述吧,主要是太菜了);最后用a标签调用浏览器的文件下载。
大概就是这样的思路吧,上代码。
配置axios返回类型:
//这里axios只做演示,实际使用需要二次封装的
axios.post('http://xxx/file, {id:1}, { responseType: 'blob' })
.then(res => {
saveFile(res,'xxx.xls') //这里要传入文件名以及文件后缀
})
.catch(err => {
})
export function saveFile (data, name) {
try {
const blobUrl = window.URL.createObjectURL(data)
const a = document.createElement('a')
a.style.display = 'none'
a.download = name
a.href = blobUrl
a.click()
} catch (e) {
alert('保存文件出错')
}
}
或者不配置axios返回类型,使用Blob 构造函数转换也是一样的
// 不配置axios
axios.post('http://xxx/file, {id:1})
.then(res => {
// 这里使用blob做一个转换
const blob = new Blob([res])
saveFile(blob,'xxx.xls') //这里要传入文件名以及文件后缀
})
.catch(err => {
})
export function saveFile (data, name) {
....
}
两种方法是一样的,配置axios 响应类型后,axios自动帮你转换类型而已,至于是手动转还是自动看个人喜好了。
总结:
1.后端返回的文件流转换成blob对象
2.使用window.URL.createObjectURL()方法将blob转换成可下载连接
3.使用a标签下载文件保存本地,下载文件也可以用location.href ,可能体验不是太友好就不介绍了。
THE END
版权声明:本文标题:vue 浏览器保存后端文件流到本地 | 前端文件流下载文件 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726116851a1056171.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论