后端接口返回:

.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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐