前端利用Blob對象建立指定文件並下載

1、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'});
複製代碼

2、URL對象

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

構造函數

建立新的URL表示指定的File對象或者Blob對象。

objectURL = window.URL.createObjectURL(blob);
複製代碼

window.URL.revokeObjectURL()

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

window.URL.revokeObjectURL(objectURL);
複製代碼

3、利用<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();
複製代碼

4、格式轉換

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便可。