後臺返回檔案流，前端實現下載檔案

BLOB (binary large object)，二進位制大物件，是一個可以儲存二進位制檔案的容器。

文件介紹https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob

目的：

後端返回的檔案是一個blob格式的流檔案，需要前端進行轉碼，得到一個url，實現下載檔案的功能，
這裡說法比較多，但是沒有測試，所以列舉幾個方法，試用

首先實現過程

第一種： 就是先向後端進行請求得到返回資料，進行轉blob，
1.Blob物件的 的型別傳值 不傳亂碼
2.生成URL的時候 要是不行就寫成window.URL.

//請求回來的資料
.then(res => {
        let blob = new Blob([res],{
            type:'application/vnd.ms-excel'      //將會被放入到blob中的陣列內容的MIME型別
        });
        let objectUrl = URL.createObjectURL(blob);  //生成一個url
        downloadFile(objectUrl,'檔名稱')
      })
downloadFile(content, filename) {
    let a = document.createElement('a')
    a.href = content
    a.download = filename
    a.click()
}

 

第二種：
在請求的時候加上 responseType: 'blob' 宣告這是一個 blob的返回值，

//請求回來的資料
.then(res => {
        let blob = new Blob([res]);
        let objectUrl = URL.createObjectURL(blob);  //生成一個url
        downloadFile(objectUrl,'檔名稱')
      })
downloadFile(content, filename) {
    let a = document.createElement('a')
    a.href = content
    a.download = filename
    a.click()
}
 

總結及注意：

1.就是blob的檔案格式你得寫，要不在返回值之後寫檔案格式，要不然請求的時候就告訴後臺你是要blob格式的要不然亂碼
2.就都試試，大部分第一種就行
3.還有人說： axios請求要是在亂碼 就加上responseType:'arraybuffer' 試試 或者上面的說的responseType: 'blob'
4.我覺得應該在封裝axios的時候單獨封裝一個請求檔案的下載，這樣方便操作，不然要是專案大了，有點別的，牽一髮而動全身