JavaScriptでオブジェクトをjsonとしてダウンロードする方法

今回はJavaScriptでオブジェクトをjsonファイルとしてダウンロードする方法を紹介します。

オブジェクトをjsonとしてダウンロードする方法
まとめ

オブジェクトをjsonとしてダウンロードする方法

結論、以下のように書けばokです。

<button type="button" id="button">download</button>

document.getElementById('button').addEventListener('click', () => {
  // jsonを作成
  const json = {
    name: '田中太郎',
    age: 20,
  };
  // ダウンロード
  const blob = new Blob([JSON.stringify(json)], { type: 'application/json' });
  const url = (window.URL || window.webkitURL).createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'ファイル名';
  a.click();
  a.remove();
  window.URL.revokeObjectURL(url);
});

HTMLはダウンロード用のボタンを用意しただけです。

js側ですが、new Blob()はバイナリデータを作成できるものです。JSON.stringify()してnew Blob()に渡せばjsonファイルが作成できます。

createObjectURL()で作成したjsonファイルをダウンロードするためのURLを作成します。引数にblobを渡すことでそのファイルを参照するURLを作成できます。

あとはダウンロード用に一時的な<a>タグを用意し、hrefに作成したURLを、downloadにファイル名を指定してa.click()でクリック処理を走らせます。これでjsonがダウンロードされます。また、この<a>タグは一時的なものなので終わったらremove()で削除しておきます。

またcreateObjectURL()で作成したURL（参照）はそのままにしておくとメモリ内にずっと残ってしまうため、削除するためにrevokeObjectURL()を書いておく必要があります。

new Blob()、createObjectURL()、revokeObjectURL()について詳しく知りたい方はMDNを参考にしてみてください。

＞＞Blob – Web API | MDN

＞＞URL: revokeObjectURL() 静的メソッド – Web API | MDN

＞＞URL: createObjectURL() 静的メソッド – Web API | MDN

流れとしては、