使用 JavaScript 創建并下載文件(模擬點擊)

先上代碼

/**
 * 創建并下載文件
 * @param {String} fileName 文件名
 * @param {String} content 文件內容
 */
function createAndDownloadFile(fileName, content) {
 var aTag = document.createElement('a');
 var blob = new Blob([content]);
 aTag.download = fileName;
 aTag.href = URL.createObjectURL(blob);
 aTag.click();
 URL.revokeObjectURL(blob);
}

很簡單對吧，直接調用這個方法，傳入文件名和文件內容，程序新建 a 標簽，新建 Blob 對象，將文件名賦給 a 標簽，同時將 Blob 對象作為 Url 也賦給 a 標簽，模擬點擊事件，自動下載成功，最后再回收內存。下面我們來看看具體是怎么操作的。

Blob 對象

Blob 對象是一個字節序列。擁有 size 和 type 等屬性。

擁有 2 個只讀狀態 OPEND 和 CLOSED。

Blob 對象屬于 JavaScript Web APIs 中的 File API 規定的部分，可以參考 W3C 文檔中的 The Blob Interface and Binary Data

再回來看看我們的代碼里是這么寫的，使用了 Blob 的構造函數：

var blob = new Blob([content]);

使用方括號的原因是，其構造函數的參數為以下4中：

• ArrayBuffer [TypedArrays] elements.
• ArrayBufferView [TypedArrays] elements.
• Blob elements.
• DOMString [WebIDL] elements.

所謂 ArrayBuffer 是一種用于呈現通用、固定長度的二進制數據的類型。詳情可以參考 ArrayBuffer -MDN 以及 ECMAScript2015 標準中的 ArrayBuffer。

Blob URLs

Blob URLs 被創建或注銷是使用 URL 對象上的方法。這個 URL 對象被掛在 Window (HTML) 對象下，或者 WorkerGlobalScope (Web Workers)對象下。

擁有以下靜態方法 createObjectURL 和 revokeObjectURL，用于創建一個 blob 對象的 url 和注銷這個 blob url。

詳情可查看 關于創建和注銷 Blob URL 的 W3C 標準文檔

模擬 click

element.click();

在 W3C 中很早就有這個規范，不需要寫繁瑣的模擬事件觸發的代碼。

小結

目前我將這個技術使用在 天貓雙十一技術和UED慶功會 的搖火箭大屏游戲中。最后的游戲結果排名，在請求了接口后，在前端直接生成并下載到了本地，作為記錄保存。主要也是因為服務端暫時沒有提供這個一張表去記錄游戲結果，于是采用了前端記錄的解決方案。

大家當時都玩的好開心啊，😁。你們的甘其食和全家卡的名單就是這樣生成的！