ダウンロードできるファイルの作成

a要素にdownload属性を付加すると、クリック時にダウンロードを促せます。そしてそのhref属性にdata URIで記述することで、ダウンロードさせるファイルを動的に作成できます。

var a = document.createElement( 'a' );
a.download = 'sample.txt';
a.onclick = function()
{
    var text = 'SAMPLE';
    a.href = 'data:,' + encodeURIComponent( text );

    // falseを返すと、既定の処理であるダウンロードが無効となる
}
ダウンロード

ブラウザによるサポートの確認

download属性がサポートされていないとこのページの手法は適用できないため、まずそれを確認します。Browser compatibility - HTMLAnchorElement - Web APIs | MDN

var a = document.createElement( 'a' );
if( 'download' in a )
{
    // サポートされる
}
else
{
    // サポートされない
}
お使いのブラウザでは、download属性は

スクリプトによるダウンロード

a要素のclick()メソッドを呼び出すことで、ユーザーによるa要素のクリック以外を誘因としてダウンロードを促せます。

button.onclick = function()
{
    a.click();
}

複数ファイルのダウンロード

click()メソッドを連続して呼び出すことで、複数のファイルを連続してダウンロードさせられます。しかし可能ならば、zipなどで1つのファイルにまとめるべきです。

a.download="sample1.txt"
a.href = 'data:,text1';
a.click();

a.download="sample2.txt"
a.href = 'data:,text2';
a.click();
2つのファイルをダウンロード

画像のダウンロード

画像をCanvasでbase64エンコードし、それをhref属性に設定することで保存させられます。

参考

関連ページ

JavaScriptのドキュメントから検索