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();