js 通過流的方式進行下載

背景

項目上需要用到多語言，項目設計語言選擇是通過header傳遞的，如果直接用平時location.href下載並無法實現這個效果，然後在網上查閱了一些資料，可以通過流處理來實現下載，代碼如下

downloadFile(){

      let timestamp = new Date().getTime(); //時間戳
      let url =XXXXXXXXXXXX;
      let xmlResquest = new XMLHttpRequest();
      xmlResquest.open("GET", url, true);
      xmlResquest.setRequestHeader("Authorization", "bearer" + this.token); //token驗證
      xmlResquest.responseType = "blob";
      xmlResquest.onload = function(oEvent) { //接口響應後的處理
        var content = xmlResquest.response; // 組裝a標籤
        let elink = document.createElement("a");// 設置下載文件名
        elink.download = "track-kml-" + timestamp + ".kml";
        elink.style.display = "none";
        let blob = new Blob([content]);
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
        URL.revokeObjectURL(blob); //釋放對象
      };
      xmlResquest.send();
}

 

本着不懂就學的原則，查閱了部分不懂的方法，以下資料來源MDN

URL.createObjectURL

URL.createObjectURL() 靜態方法會創建一個 DOMString，其中包含一個表示參數中給出的對象的URL。這個 URL 的生命週期和創建它的窗口中的 document 綁定。這個新的URL 對象表示指定的 File 對象或 Blob 對象。

內存管理

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

 

XMLHttpRequest.responseType

XMLHttpRequest.responseType 屬性是一個枚舉類型的屬性，返回響應數據的類型。它允許我們手動的設置返回數據的類型。如果我們將它設置爲一個空字符串，它將使用默認的"text"類型。

在工作環境(Work Environment)中將responseType的值設置爲"document"通常會被忽略. 當將responseType設置爲一個特定的類型時，你需要確保服務器所返回的類型和你所設置的返回值類型是兼容的。那麼如果兩者類型不兼容呢?恭喜你，你會發現服務器返回的數據變成了null，即使服務器返回了數據。還有一個要注意的是，給一個同步請求設置responseType會拋出一個InvalidAccessError 的異常。

responseType支持以下幾種值：

值	描述
""	將 responseType 設爲空字符串與設置爲"text"相同， 是默認類型 （實際上是 DOMString）。
"arraybuffer"	response 是一個包含二進制數據的 JavaScript ArrayBuffer 。
"blob"	response 是一個包含二進制數據的 Blob 對象 。
"document"	response 是一個 HTML Document 或 XML XMLDocument ，這取決於接收到的數據的 MIME 類型。請參閱 HTML in XMLHttpRequest 以瞭解使用 XHR 獲取 HTML 內容的更多信息。
"json"	response 是一個 JavaScript 對象。這個對象是通過將接收到的數據類型視爲 JSON 解析得到的。
"text"	response 是包含在 DOMString 對象中的文本。
"moz-chunked-arraybuffer"	與"arraybuffer"相似，但是數據會被接收到一個流中。使用此響應類型時，響應中的值僅在 progress 事件的處理程序中可用，並且只包含上一次響應 progress 事件以後收到的數據，而不是自請求發送以來收到的所有數據。 在 progress 事件處理時訪問 response 將返回到目前爲止收到的數據。在 progress 事件處理程序之外訪問， response 的值會始終爲 null 。
"ms-stream"	response 是下載流的一部分；此響應類型僅允許下載請求，並且僅受Internet Explorer支持。