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]，而不是我們文件原本的內容。所以我的解決方法就是讓后端統一返回文件名並把該字段暴露出來讓前端能獲取到，渲染和處理數據的格式一樣，就不會出現打包之后下載文件出錯的問題