JavaScript
HTML5

javascriptからファイル保存ダイアログを出す

More than 3 years have passed since last update.

jsでファイルを保存するための方法.

html5をサポートしたブラウザなら動くはず.

投稿してから気がつきましたがほとんど同じ内容の投稿がありました.

javascriptで生成したファイルをローカルに保存する - Qiita

しかし,少しだけ記事の趣旨が違うのでこの記事も残しておきます.


手順

a要素を作成する.

a要素のhrefにダウンロードしたいリンクを代入する.

a要素にdownload属性に値をつける.

download属性にセットした値がファイル名となる.(拡張子はつけない方がよい)

a要素にクリックイベントを発生させる.


実際のコード


download.js

function download(url, name){

var a = document.createElement('a');
a.href = url;
a.setAttribute('download', name || 'noname');
a.dispatchEvent(new CustomEvent('click'));
}

上記の関数のurlにダウンロードしたいリンク,nameにファイル名を入れればよい.

safariやieでは動かない.

createObjectURLを組み合わせればArrayBufferなどを保存することもできる.