Vue文件下载坑-优快云博客

本文讲述了在Vue项目中实现文件下载功能时遇到的问题及解决方案。主要介绍了如何处理后端返回的文件名，确保不同环境下文件正常下载，避免出现乱码或无法打开的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中下载文件踩过的坑（一）

很多的系统管理端会有文件上传或者下载功能，那么在文件上传和下载的时候我们又会遇到什么样的坑人的意外呢？

昨天我们在做管理系统的文件下载时，遇到了这么一个问题。因为文件名是后端提供，所以返回在了响应头的Content-Disposition中，但是因为这个字段并不是默认暴露的字段，所以需要后端做暴露（加上这句代码）

Access-Control-Expose-Headers: Content-Disposition

在前端接收到后端暴露的响应头字段时，在请求拦截器中拿到并处理返回数据

service.interceptors.response.use(
  response => {
    if (response.request.responseType === 'arraybuffer' && !response.headers['content-disposition']) {
      //当没有content-disposition这个字段时return的数据
      return response.data
    }
    if (response.request.responseType === 'arraybuffer' && response.headers['content-disposition']) {
      //当存在content-disposition这个字段时，return出来的数据
      const temp = {}
      temp.data = response.data
      temp.filename = response.headers['content-disposition']
      return temp
    }
    const res = response.data
    if (res.success) {
      return response.data
    } else {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(res.message)
    }
  }
)

当我们下载文件时返回了文件名，下载文件模板时没有返回文件名

getDocData(data) {
      const params = {
        id: data
      }
      GiftApi.exportDoc(params).then(res => { //返回文件名的写法
        this.content = res.data
        const filename = res.filename.split(';')[1].split('=')[1]
        this.filename = decodeURI(filename)
        const blob = new Blob([this.content])
        if (window.navigator.msSaveOrOpenBlob) {
          // 兼容IE10
          navigator.msSaveBlob(blob, this.filename)
        } else {
          //  chrome/firefox
          const aTag = document.createElement('a')
          aTag.download = this.filename
          aTag.href = URL.createObjectURL(blob)
          aTag.click()
          URL.revokeObjectURL(aTag.href)
        }
      })
    }

getDocData(data) {
      const params = {
        id: data
      }
      GiftApi.exportDoc(params).then(res => { //未返回文件名的写法
        this.content = res
        this.filename = this.temp.name + '.doc'
        const blob = new Blob([this.content])
        if (window.navigator.msSaveOrOpenBlob) {
          // 兼容IE10
          navigator.msSaveBlob(blob, this.filename)
        } else {
          //  chrome/firefox
          const aTag = document.createElement('a')
          aTag.download = this.filename
          aTag.href = URL.createObjectURL(blob)
          aTag.click()
          URL.revokeObjectURL(aTag.href)
        }
      })
    }

这样的代码本身没有错误，而且在本地和测试服务器上测试的时候也没有问题，但是打包之后的测试会存在问题，就是未返回文件名的接口下载的文件，打开会出现[object,object]，而不是我们文件原本的内容。所以我的解决方法就是让后端统一返回文件名并把该字段暴露出来让前端能获取到，渲染和处理数据的格式一样，就不会出现打包之后下载文件出错的问题

转载https://www.cnblogs.com/liangxia/p/12932213.html