后台返回blob文件流，前端實現下載文件

后台返回文件流，前端實現下載文件

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的時候單獨封裝一個請求文件的下載，這樣方便操作，不然要是項目大了，有點別的，牽一發而動全身