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

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 中,然後再用頁面上的某個按鈕去觸發,這樣就能完成一鍵下載了。

 

參考資料:

創作者介紹
創作者 大笨鳥 的頭像
大笨鳥

大笨鳥的私房菜

大笨鳥 發表在 痞客邦 留言(0) 人氣()