使用 JavaScript 創(chuàng)建并下載文件(模擬點(diǎn)擊)

先上代碼

/**
 * 創(chuàng)建并下載文件
 * @param {String} fileName 文件名
 * @param {String} content 文件內(nèi)容
 */
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);
}

很簡(jiǎn)單對(duì)吧，直接調(diào)用這個(gè)方法，傳入文件名和文件內(nèi)容，程序新建 a 標(biāo)簽，新建 Blob 對(duì)象，將文件名賦給 a 標(biāo)簽，同時(shí)將 Blob 對(duì)象作為 Url 也賦給 a 標(biāo)簽，模擬點(diǎn)擊事件，自動(dòng)下載成功，最后再回收內(nèi)存。下面我們來(lái)看看具體是怎么操作的。

Blob 對(duì)象

Blob 對(duì)象是一個(gè)字節(jié)序列。擁有 size 和 type 等屬性。

擁有 2 個(gè)只讀狀態(tài) OPEND 和 CLOSED。

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

再回來(lái)看看我們的代碼里是這么寫的，使用了 Blob 的構(gòu)造函數(shù)：

var blob = new Blob([content]);

使用方括號(hào)的原因是，其構(gòu)造函數(shù)的參數(shù)為以下4中：

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

所謂 ArrayBuffer 是一種用于呈現(xiàn)通用、固定長(zhǎng)度的二進(jìn)制數(shù)據(jù)的類型。詳情可以參考 ArrayBuffer -MDN 以及 ECMAScript2015 標(biāo)準(zhǔn)中的 ArrayBuffer。

Blob URLs

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

擁有以下靜態(tài)方法 createObjectURL 和 revokeObjectURL，用于創(chuàng)建一個(gè) blob 對(duì)象的 url 和注銷這個(gè) blob url。

詳情可查看 關(guān)于創(chuàng)建和注銷 Blob URL 的 W3C 標(biāo)準(zhǔn)文檔

模擬 click

element.click();

在 W3C 中很早就有這個(gè)規(guī)范，不需要寫繁瑣的模擬事件觸發(fā)的代碼。

小結(jié)

目前我將這個(gè)技術(shù)使用在 天貓雙十一技術(shù)和UED慶功會(huì) 的搖火箭大屏游戲中。最后的游戲結(jié)果排名，在請(qǐng)求了接口后，在前端直接生成并下載到了本地，作為記錄保存。主要也是因?yàn)榉?wù)端暫時(shí)沒(méi)有提供這個(gè)一張表去記錄游戲結(jié)果，于是采用了前端記錄的解決方案。

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