vue实现blob文档流下载文件
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
后端接口返回:
.zip文件,图片等
.json,.txt文件下载的数据格式:
VUE页面使用
async downloadFile(fileId: string, fileName: string) {
try {
const res = await API.Defect.downloadDefectFile({
fileId: fileId,
fileName: fileName
})
if (res.data) {
downloadFetchFiles(res)
}
} catch (error) {
warn(error, true)
}
},
downloadFetchFiles方法代码:
export function downloadFetchFiles(res: { data: BlobPart; fileName: string }) {
const blob = new Blob([res.data])
const src = URL.createObjectURL(blob)
if (src && 'download' in document.createElement('a')) {
const elink = document.createElement('a')
elink.download = `${decodeURI(res.fileName)}`
elink.href = src
elink.click()
} else {
warn('您的浏览器不支持下载功能', true)
}
}
这个方法也是常用的文件流下载方式,.txt, .json文件下载后都正常,但是图片,压缩包下载后打不开,后来发现:
注意:在这里需要特别注意的是不管接口是get还是post请求,在请求时需要多加一个参数 responseType:'blob' ,否则等等下载的文件会出现乱码或者下载后打不开文件的问题;
封装接口处添加
/**
* 下载文件
*/
export function downloadDefectFile(params: { fileId: string; fileName: string }) {
return request.get(`/yh/download/downloadForStream?fileId=${params.fileId}&fileName=${params.fileName}`, { responseType: 'blob' })
}
中午跑通了。
GitHub 加速计划 / vu / vue
80
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 6 个月前
更多推荐
已为社区贡献11条内容
所有评论(0)