先上代碼

成都創(chuàng)新互聯是一家專業(yè)提供凌海企業(yè)網站建設,專注與成都做網站、網站設計、H5技術、小程序制作等業(yè)務。10年已為凌海眾多企業(yè)、政府機構等服務。創(chuàng)新互聯專業(yè)網站制作公司優(yōu)惠進行中。

/**
 * 創(chuàng)建并下載文件
 * @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 對象是一個字節(jié)序列。擁有 size 和 type 等屬性。

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

Blob 對象屬于 JavaScript Web APIs 中的 File API 規(guī)定的部分，可以參考 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 被創(chuàng)建或注銷是使用 URL 對象上的方法。這個 URL 對象被掛在 Window (HTML) 對象下，或者 WorkerGlobalScope (Web Workers)對象下。

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

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

模擬 click

element.click();

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

小結

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

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

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

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

廣告

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