[轉]用JavaScript在瀏覽器中創建下載文件

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

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

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

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

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

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

 

但是這樣還不夠，以上的方法只適合用在文件是在服務器上的情況。如果在瀏覽器端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之后，用戶點擊鏈接，就能觸發瀏覽器下載。

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

下載的文件類型限制死了，美眉要下載處理后的果照怎么辦？
下載還要再點擊一下，太麻煩啦。
要解決文件類型的問題，可以用瀏覽器的新API（URL.createObjectURL）來解決問題，URL.createObjectURL通常都是用來創建圖片的DataURI用來顯示圖片，這里用來下載文件，讓瀏覽器來幫我們設定好文件類型。

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

現在，我們只要用content創建一個ObjectURL並賦值給aLink即可解決文件類型的限制問題。
文件的自動下載也挺好辦，自己構建一個UI點擊事件，再自動觸發下，就能實現自動下載啦。

現在來看看最終代碼(Chrome,FF,Edge)：

function downloadFile(fileName, content){
    var aLink = document.createElement('a');
    var blob = new Blob([content]);
    var evt = document.createEvent("MouseEvents");
    evt.initEvent("click", false, false);//initEvent 不加后兩個參數在FF下會報錯, 感謝 Barret Lee 的反饋
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(evt);
    if (navigator.userAgent.indexOf('Firefox') >= 0)
        aLink.click();//FF的支持,可能不需要
}

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

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

訪問Github，get更多技能:https://github.com/lzpong/H5_JS_Tools。

 

(ps:http://www.jb51.net/article/47723.htm,http://www.qdfuns.com/notes/17838/339a8592ad58052aabd8c8d37e922a44)