vue实现blob文档流下载文件

最新推荐文章于 2025-03-26 16:05:10 发布

原创

最新推荐文章于 2025-03-26 16:05:10 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章讲述了在使用VUE开发中，后端接口返回不同格式文件时遇到的问题，特别是图片和.zip文件下载后无法打开。作者强调了在HTTP请求中设置responseType为blob的重要性，以确保正确处理文件流并避免乱码或无法打开的问题，最终通过修改封装接口解决了这个问题。

后端接口返回：

.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 docu