HTML5 a 標簽可以使用 download 屬性來設置資源的下載,但需要是同源,如果瀏覽器可以解析也會直接打開。

這時我們可以通過第三方庫 download 來實現更完整的下載功能。

download.js 相關資源:

download.js 庫提供了 download() 函數用於下載文件。

下載內容可以是 URL、字符串、Blob 或類型化的數據數組,或者通過將文件數據表示為 base64 或 url 編碼字符串的 dataURL。

無論輸入格式如何,download() 都使用指定的文件名和 mime 信息以與使用 Content-Disposition HTTP 標頭的服務器相同的方式保存文件。

download(data, strFileName, strMimeType);
  • data - 下載的數據內容,可以是 Blob、File、String 或 dataURL。
  • strFileName - 要創建的文件的名稱。
  • strMimeType - 要下載的文件的 MIME 內容類型。

實例

文本

將字符串存儲到 dlText.txt 文件中並下載:

download("hello world", "dlText.txt", "text/plain");

dataURL 文本實例:

download("data:text/plain,hello%20world", "dlDataUrlText.txt", "text/plain");

blob 文本實例:

download(new Blob(["hello world"]), "dlTextBlob.txt", "text/plain");

url 實例:

download("/robots.txt");

UInt8 文本數組實例:

var str= "hello world",    arr= new Uint8Array(str.length);
str.split("").forEach(function(a,b){
  arr[b]=a.charCodeAt();
});

download( arr, "textUInt8Array.txt", "text/plain" );

HTML

html 字符串實例:
download(document.documentElement.outerHTML, "dlHTML.html", "text/html");

html Blob 實例:

download(new Blob(["hello world".bold()]), "dlHtmlBlob.html", "text/html");

ajax 回調實例:

$.ajax({
        url: "/download.html",
        success: download.bind(true, "text/html", "dlAjaxCallback.html")
});

二進製文件

圖片 URL:

download("/diff6.png");

異步下載圖片:

var x=new XMLHttpRequest();
x.open( "GET", "/diff6.png" , true);
x.responseType="blob";
x.onload= function(e){download(e.target.response, "awesomesauce.png", "image/png");};
x.send();