入力した文字列や設定したデータなどの情報をJsonファイルとしてダウンロードする方法
inputコントロールに入力した文字列や設定したデータなどの情報をJSON形式のファイルとしてダウンロードする方法です。
といってもダウンロードを実行する部分については、こちらの記事（Canvas上のイメージを画像ファイルとして保存する方法）で紹介した画像ファイルのダウンロード方法と一緒で、異なるのはJSONデータを用意するところだけです。
目次
- コード
- 動作確認
- 参考リンク
コード
HTML
<input type="text" id="sampleTitle" value="" />
<textarea id="sampleDescription"></textarea>
<button onclick="downloadJson();">JSONファイルのダウンロード</button>
JavaScript
// JSONデータの生成、ダウンロード
function downloadJson(){
var data = {};
data.title = document.getElementById("sampleTitle").value;
data.description = document.getElementById("sampleDescription").value;
var blob = new Blob([JSON.stringify(data)], { type: "application/json" });
saveBlob(blob, "sample.json");
}
// ファイルダウンロード
function saveBlob(blob, fileName)
{
var url = (window.URL || window.webkitURL);
// ダウンロード用のURL作成
var dataUrl = url.createObjectURL(blob);
// イベント作成
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
// a要素を作成
var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
// ダウンロード用のURLセット
a.href = dataUrl;
// ファイル名セット
a.download = fileName;
// イベントの発火
a.dispatchEvent(event);
}
Safariはdownload属性に対応していないのかダウンロードの対象としたデータはブラウザ上で開かれてしまいます。今後のバージョン（Safari 10.1）で対応されそうな...という感じなので、都度確認した方がよさそうです。