大笨鳥的私房菜

這幾天找資料時無意間看到了這個網頁

http://eligrey.com/demos/FileSaver.js/

上面除了應用了 File API 之外，另外讓我感興趣的就是按一下按鍵就能下載。

當然這功能似乎一般的超連結寫法或是交由後端 server 程式處理也能做到，但一般超連結如果遇到的是瀏覽器認識的檔案，如圖檔之類的，就會直接在瀏覽器開啟，使用者如果要下載，就必需要開啟右鍵選單來下載，而交由後端 server 程式就開發者而言就更麻煩了，因此就小小研究一下這個功能。

var saveLink = document.createElementNS("http://www.w3.org/1999/xhtml", "a"),
    canUseSaveLink = "download" in save_link,
    event = document.createEvent("MouseEvents");

if (canUseSaveLink) {
    saveLink.href = "https://www.google.com.tw/images/srpr/logo3w.png";
    saveLink.download = "pic1.png";

    event.initMouseEvent(
        "click", true, false, window, 0, 0, 0, 0, 0, 
        false, false, false, false, 0, null
    );
				
    saveLink.dispatchEvent(event);
}

第 1 行是動態建立出一個超連結物件，第 2 行則是判斷該超連結物件中是否有『download』屬性，這個屬性目前只有 Chrome14+ 有支援。

接著第 6 行指定要下載的檔案，第 7 行則指定下載後的檔案名稱。最後 3、9 ~ 12 行建出一個 click 的 mouse 事件，並由剛動態建立出來的超連件物件來發動。

最後，只要將上述的 javascript code 包裝在 function 中，然後再用頁面上的某個按鈕去觸發，這樣就能完成一鍵下載了。

 

參考資料：

• http://eligrey.com/demos/FileSaver.js/
• http://www.html5dw.com/forum.php?mod=viewthread&tid=311