1. 程式人生 > 實用技巧 >vue axios 二進位制檔案下載

vue axios 二進位制檔案下載

背景:

excel 檔案下載,後臺返回的是二進位制檔案

開始:

api.workerDownload({
        ...this.queryString
      }).then(res => {
        const blob = new Blob([res.data], {
          type: 'application/vnd.ms-excel'
        })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '人員資訊.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        this.isDownloading = false
      }).catch(err => {
        this.isDownloading = false
      })

  遇到的問題

開始在請求中沒有新增responseType, 導致後臺直接內容返回的二進位制

api.workerDownload({
        ...this.queryString
      }).then(res => {
        const blob = new Blob([res], {
          type: 'application/vnd.ms-excel'
        })
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '人員資訊.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        this.isDownloading = false
      }).catch(err => {
        this.isDownloading = false
      })

  兩個地方 就是對於res沒有處理有區別 這樣就是導致匯出內容為[object, object]

  解決: 在請求中新增 responseType: 'blob' , 這樣返回就是Blob形式的二進位制內容,處理的時候需要的是二進位制內容,所以取res.data 進行轉換。