獲取后端傳來的文件地址，將該文件轉為Blob對象進行下載

1、前言：

　　如果后端傳來的是Blob二進制流，

　　

 

　　二進制流就長這個樣子，可以利用 new Blob() 獲取blob對象：

　　let blob = new Blob([data.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' })

　　提示：type的值為application/vnd.openxmlformats-officedocument.wordprocessingml.document表示docx文件，application/msword表示doc文件，具體在這里查：常見 MIME 類型列表

　　但是一般情況下想要獲取后端傳來的二進制流都會在請求頭中添加 responseType: 'blob' 設置響應數據為blob格式

 

2、實操

　　1）下載插件：npm i axios file-saver

　　2）封裝一個點擊下載的函數：

    getFile(url) {
      axios({
        headers: { Authorization: 'Bearer ' + sessionStorage.getItem('token') },
        method: 'get',
        url,
        responseType: 'blob'
      })
        .then(data => {
          let blob = new Blob([data.data], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' })
          saveAs(blob, '自定義名稱.xxx')
        })
        .catch(error => {
          console.warn(error.toString())
        })
    },

　　　　解釋：

　　　　　　1、saveAs() 方法中第一個參數是blob對象，第二個參數是設置文件名和后綴名。變量blob在實例化之前就已經是blob對象了，這里只是對格式進行了重新定義，用原來的data.data也可以進行下載

　　　　　　2、使用 window.URL.createObjectURL() 將實例化后的blob對象放進來，可以得到一個blob類型的地址（格式：blob:https://192.168.10.51:8080/dbad6f81-13ad-4af9-85d4-3c0bc81e53f6），可以使用 window.open(url) 下載這個文件，但是這種方式不能重命名，不如 saveAs() 方法用的爽

　　　　　　3、如果在請求的時候沒有設置 responseType: 'blob'，那么 new Blob() 的作用就提現出來啦

　　　　　　　　

 

　　　　　　　　BUT！！！還是請加上 responseType: 'blob'

 　　　　　　4、調用 getFile() 傳入文件url進行下載