一、Blob對象

Blob對象示意一個不可變、原始數據的類文件對象。Blob 示意的不一定是JavaScript原生花樣的數據。File接口基於Blob，繼續了blob的功用並將其擴大使其支撐用戶體繫上的文件。

組織函數

var aBlob = new Blob( array, options );

• array 是一個由ArrayBuffer（二進制數據緩衝區）、ArrayBufferView（二進制數據緩衝區的array-like視圖）、Blob、DOMString等對象組成的Array，或許其他相似對象的混合體，它將會被放進Blob。DOMStrings會被編碼為UTF-8。

• options 是可選的，它可能會指定以下兩個屬性：

  • type，默認值為 “”，它代表了將會被放入到blob中的數組內容的MIME範例。
  • endings，默認值為”transparent”，用於指定包括行結束符n的字符串怎樣被寫入。 它是以下兩個值中的一個： “native”，代錶行結束符會被更改成適宜宿主操作體系文件體系的換行符，或許 “transparent”，代表會堅持blob中保留的結束符穩定。

示例

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
  {type : 'application/json'});

二、URL對象

經由過程建立URL對象指定文件的下載鏈接。

組織函數

建立新的URL示意指定的File對象或許Blob對象。

objectURL = window.URL.createObjectURL(blob);

window.URL.revokeObjectURL()

在每次挪用createObjectURL()要領時，都邑建立一個新的 URL 對象，縱然你已用雷同的對象作為參數建立過。當不再須要這些 URL 對象時，每一個對象必需經由過程挪用 URL.revokeObjectURL()要領來開釋。瀏覽器會在文檔退出的時刻自動開釋它們，然則為了取得最好機能和內存運用狀態，你應該在平安的機遇主動開釋掉它們。

window.URL.revokeObjectURL(objectURL);

三、應用<a>標籤下載

天生一個<a>標籤。

const link = document.createElement('a');

href屬性指定下載鏈接

link.href = window.URL.createObjectURL(blob);

dowload屬性指定文件名

download 屬性劃定被下載的超鏈接目的。在<a>標籤中必需設置 href 屬性。該屬性也能夠設置一個值來劃定下載文件的稱號。所許可的值沒有限定，瀏覽器將自動檢測準確的文件擴大名並添加到文件 (.img, .pdf, .txt, .html, 等等)。

link.download = fileName;

click()事宜觸發下載

link.click();

四、花樣轉換

MIME範例運用text/plain，用.txt文件的花樣編碼去下載doc(docx)文件（doc(docx)文件每次翻開須要挑選適宜的編碼，暫未找到解決方案，迎接補充）。

const foo = {hello: "world"};
const blob = new Blob([JSON.stringify(foo)], {type: "text/plain"});
const fileName = `${new Date().valueOf()}.doc`;
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
window.URL.revokeObjectURL(link.href);

注 ：下載指定擴大名的文件只須要對比MIME 參考手冊設置type即可。