先上代碼

成都創(chuàng)新互聯(lián)是一家專業(yè)提供凌海企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站設(shè)計、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為凌海眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jì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);
}

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

Blob 對象

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

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

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

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

var blob = new Blob([content]);

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

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

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

Blob URLs

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

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

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

模擬 click

element.click();

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

小結(jié)

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

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

當(dāng)前題目：使用JavaScript創(chuàng)建并下載文件(模擬點擊)
本文地址：http://www.rwnh.cn/article18/igjpdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站、域名注冊、網(wǎng)站改版、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)