在瀏覽器端用js建立和下載圖片

前端不少項目中，都有文件下載的需求，特別是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下會報錯     
     aLink.download = fileName;    
    aLink.href = URL.createObjectURL(blob);    
   aLink.dispatchEvent(evt);
}

如今，只要一調用downloadFile，文件就自動下載了，是否是很爽咧，^_^。

注：目前（2014-01-02）Blob和URL.createObjectURL在標準瀏覽器裏面都再也不須要加私有前綴，能夠放心使用啦啦啦～～若是你不放心，能夠查查Can I Use。