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

 更新時間:2019年10月25日 22:33:50   作者:HyG   我要評論
本文將介紹如何使用 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慶功會 的搖火箭大屏游戲中。最后的游戲結果排名,在請求了接口后,在前端直接生成并下載到了本地,作為記錄保存。主要也是因為服務端暫時沒有提供這個一張表去記錄游戲結果,于是采用了前端記錄的解決方案。

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

相關文章

  • 淺談發布訂閱模式與觀察者模式

    淺談發布訂閱模式與觀察者模式

    這篇文章主要介紹了淺談發布訂閱模式與觀察者模式,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-04-04
  • Javascript數組的排序 sort()方法和reverse()方法

    Javascript數組的排序 sort()方法和reverse()方法

    JavaScript提供了sort()方法和reverse()方法,使得我們可以簡單的對數組進行排序操作和逆序操作
    2012-06-06
  • javascript跨域的方法匯總

    javascript跨域的方法匯總

    JavaScript出于安全方面的考慮,不允許跨域調用其他頁面的對象。但在安全限制的同時也給注入iframe或是ajax應用上帶來了不少麻煩。這里把涉及到跨域的一些問題簡單地整理一下
    2015-10-10
  • JavaScript是否可實現多線程  深入理解JavaScript定時機制

    JavaScript是否可實現多線程 深入理解JavaScript定時機制

    JavaScript的setTimeout與setInterval是兩個很容易欺騙別人感情的方法,因為我們開始常常以為調用了就會按既定的方式執行, 我想不少人都深有同感,
    2009-12-12
  • Django1.7+JQuery+Ajax驗證用戶注冊集成小例子

    Django1.7+JQuery+Ajax驗證用戶注冊集成小例子

    下面是散仙使用Django+Jquery+Ajax的方式來模擬實現了一個驗證用戶注冊時,用戶名存在不存在的一個小應用。注意,驗證存在不存在使用的是Ajax的方式,不用讓用戶點擊按鈕驗證是否存在,需要的朋友可以參考下
    2017-04-04
  • 使用開源工具制作網頁驗證碼的方法

    使用開源工具制作網頁驗證碼的方法

    這篇文章主要介紹了使用開源工具制作網頁驗證碼的方法的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-10-10
  • 巧用weui.topTips驗證數據的實例

    巧用weui.topTips驗證數據的實例

    下面小編就為大家帶來一篇巧用weui.topTips驗證數據的實例。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • javascript實現圖片自動和可控的輪播切換特效

    javascript實現圖片自動和可控的輪播切換特效

    這篇文章主要介紹了javascript實現圖片自動和可控的輪播切換特效,效果非常的棒,推薦給大家,有需要的小伙伴可以參考下。
    2015-04-04
  • 關于javascript sort()排序你可能忽略的一點理解

    關于javascript sort()排序你可能忽略的一點理解

    最近在研究Javascript發現了其中一些之前忽略的問題,所以想著總結分享出來,下面這篇文章主要給大家介紹了關于javascript sort()排序你可能忽略的一點理解,文中介紹的非常詳細,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-07-07
  • 用JavaScript獲取頁面文檔內容的實現代碼

    用JavaScript獲取頁面文檔內容的實現代碼

    下面小編就為大家帶來一篇用JavaScript獲取頁面文檔內容的實現代碼。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-06

最新評論

福建体育彩票时时彩11