fetch文件流處理

fetch下載文件

由於業務需要列表導出excel表格，前端使用的是 fetch 發的請求，后端返回的是文件流，並不是 url

1、設置請求頭；

// 本人未驗證options參數
fetch('url/**', {
    method: "GET",
    headers: {
        'Content-Type': "application/octet-stream;charset=UTF-8",
    }
}).then(() => {
    // 這里解析body
    return res.blob();
}).then((res) => {
    // blob對象
    return res;
})

2、下載；

fetch('url', {
    method: "GET",
    headers: {
        'Content-Type': "application/octet-stream;charset=UTF-8",
    }
}).then(() => {
    return res.blob();
}).then((res) => {
    // 對blob對象進行處理
    const a = document.createElement('a');
    const body = document.querySelector('body');
    // 這里注意添加需要下載的文件后綴；
    a.download = 'downloadName.xlsx';
    a.href = window.URL.createObjectURL(res);
    a.style.display = 'none';
    body.appendChild(a);
    a.click();
    body.removeChild(a);
    window.URL.revokeObjectURL(a.href);
})

3、拓展

1. URL.createObjectURL

   該方法會根據傳入的參數創建一個指向該參數對象的URL. 這個URL的生命僅存在於它被創建的這個文檔里. 新的對象URL指向執行的File對象或者是Blob對象.

   • 語法：

     objectURL = URL.createObjectURL(object);
     

   • 參數：

     object: 用於創建 URL 的 File 對象、Blob 對象或者 MediaSource 對象。
     

   • 返回值；

     包含了一個對象的URL，該URL可用於指定源 object的內容。例如：臨時圖片url
     

   • 附注：

     在每次調用 createObjectURL() 方法時，都會創建一個新的 URL 對象，即使你已經用相同的對象作為參數創建過。當不再需要這些 URL 對象時，每個對象必須通過調用 URL.revokeObjectURL() 方法來釋放。
     瀏覽器在 document 卸載的時候，會自動釋放它們，但是為了獲得最佳性能和內存使用狀況，你應該在安全的時機主動釋放掉它們。
     

2. URL.revokeObjectURL;

   該方法會用來釋放一個之前已經存在的、通過調用 URL.createObjectURL() 創建的 URL 對象。當你結束使用某個 URL 對象之后，應該通過調用這個方法來讓瀏覽器知道不用在內存中繼續保留對這個文件的引用了。

   • 語法：

     window.URL.revokeObjectURL(objectURL);
     

   • 參數；

     一個 DOMString，表示通過調用 URL.createObjectURL() 方法產生的 URL 對象。