vue + axios 文件下載

 

 

實現文件下載功能時，後臺返回的爲文件流時，需要通過 blob 處理文件流

 

首先設置 responseType 對象格式爲 blob ，阻止亂碼問題

獲取請求返回的 response 對象中的二進制文件流轉爲 blob 對象

創建一個臨時的 url 指向 blob 對象

最後釋放這個臨時的 url 對象

 

實現的過程，涉及到了 ie 的兼容問題，ie 瀏覽器不支持 a 標籤屬性

細節代碼如下：

 

      axios({

        url: this.downloadPath + i.id,

        method: 'get',

        headers: {

          'Content-Type': 'application/x-www-form-urlencoded'

        },

        responseType: 'blob'

      }).then(res => {

        let blob = new Blob([res.data], { type: 'application/octet-stream' })

        let href = window.URL.createObjectURL(blob)

        // 兼容 ie

        if (window.navigator.msSaveBlob) {

          window.navigator.msSaveBlob(blob, i.name)

        } else {

          const link = document.createElement('a')

          link.style.display = 'none'

          link.href = href

          link.download = res.headers['filename']

          document.body.appendChild(link)

          link.click()

          document.body.removeChild(link)

          window.URL.revokeObjectURL(link)

        }

      })