1. 程式人生 > 實用技巧 >獲取後端傳來的檔案地址,將該檔案轉為Blob物件進行下載

獲取後端傳來的檔案地址,將該檔案轉為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)下載外掛:npmiaxiosfile-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',那麼 newBlob()的作用就提現出來啦

        

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

      4、呼叫 getFile()傳入檔案url進行下載