h5(H5)下載功能，用JS在瀏覽器中建立下載檔案
轉載：http://www.jb51.net/article/47723.htm
但受限於瀏覽器，很多情況下我們都只能給出個連結，讓使用者點選開啟-》另存為。如下面這個連結：
<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點選事件，再自動觸發下，就能實現自動下載啦。
現在來看看最終程式碼：
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）Blob和URL.createObjectURL在標準瀏覽器裡面都不再需要加私有字首，可以放心使用啦啦啦～～如果你不放心，可以查查Can I Use。
轉載：http://www.jb51.net/article/47723.htm