前端很多項目中，都有文件下載的需求，特別是JS生成文件內容，然后讓瀏覽器執行下載操作（例如在線圖片編輯、在線代碼編輯、iPresst等）。

但受限于瀏覽器，很多情況下我們都只能給出個鏈接，讓用戶點擊打開-》另存為。如下面這個鏈接：

<a href=”file.js”>file.js</a>

用戶點擊這個鏈接的時候，瀏覽器會打開并顯示鏈接指向的文件內容，顯然，這并沒有實現我們的需求。

HTML5中給a標簽增加了一個download屬性，只要有這個屬性，點擊這個鏈接時瀏覽器就不在打開鏈接指向的文件，而是改為下載（目前只有chrome、firefox和opera支持）。

下載時會直接使用鏈接的名字來作為文件名，但是是可以改的，只要給download加上想要的文件名即可，如：download=“not-a-file.js”。

Not enough！

但是這樣還不夠，以上的方法只適合用在文件是在服務器上的情況。如果在瀏覽器端js生成的內容，想讓瀏覽器進行下載要如何辦到呢？

其實還是有辦法辦到的，相信很多人都多少聽過了DataURI這個詞，比較常見的就是圖片的src，如：

<img src=”data:image/gif;base64,R0lGOXXXXX">

DataURI的解釋可以移步這里，本人就不在解釋了。

那么，現在要將js生成的內容進行下載就有法可依了。封裝成一個方法如下：

function downloadFile(aLink, fileName, content){
aLink.download = fileName;
aLink.href = "data:text/plain," + content;
}

調用downloadFile之后，用戶點擊鏈接，就能觸發瀏覽器下載。

Not enough！

但是，還不夠，上面的辦法有兩個硬傷，會導致流失很多懶人美眉：

1. 下載的文件類型限制死了，美眉要下載處理后的果照怎么辦？
2. 下載還要再點擊一下，太麻煩啦。

要解決文件類型的問題，可以用瀏覽器的新API（URL.createObjectURL）來解決問題，URL.createObjectURL通常都是用來創建圖片的DataURI用來顯示圖片，這里用來下載文件，讓瀏覽器來幫我們設定好文件類型。

URL.createObjectURL的參數是File對象或者Blob對象，File對象也就是通過input[type=file]選擇的文件，Blob對象是二進制大對象，詳細說明可參考這里。

現在，我們只要用content創建一個ObjectURL并賦值給aLink即可解決文件類型的限制問題。

文件的自動下載也挺好辦，自己構建一個UI點擊事件，再自動觸發下，就能實現自動下載啦。

現在來看看最終代碼：

function downloadFile(fileName, content){
var aLink = document.createElement('a');
var blob = new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent 不加后兩個參數在FF下會報錯, 感謝 Barret Lee 的反饋
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}

現在，只要一調用downloadFile，文件就自動下載了，是不是很爽咧，^_^。

注：目前（2014-01-02）Blob和URL.createObjectURL在標準瀏覽器里面都不再需要加私有前綴，可以放心使用啦啦啦～～如果你不放心，可以查查Can I Use。

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

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

參考

• 在瀏覽器端用JS創建和下載文件 -alloyteam

總結

以上是生活随笔為你收集整理的使用 JavaScript 创建并下载文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。