【JavaScript】ファイル出力（ブラウザでのダウンロード）

「JavaScript内で作ったデータをファイルとしてダウンロードさせたい」
ということがあったので方法をまとめました。

データをファイルとしてダウンロードさせる方法
参考

データをファイルとしてダウンロードさせる方法

JavaScriptでデータをダウンロードさせるのは方法さえ分かれば簡単です。
以下の３ステップで実現できます。

①createObjectURL()を使ってデータからURLを生成する
②生成したURLをaタグのリンクに設定する
③aタグにdownload属性を設定する

これで、データをファイルとしてダウンロードするリンクが作成できます。
(あとはユーザにクリックしてもらうだけですね)

実際のコードを見た方が分かり易いのでサンプルコードも置いておきます。

<html>
<script>

function downloadFile() {
  // ダウンロードさせたいデータ (File, Blob, MediaSource形式で指定可能)
  let downloadData = new Blob(["Hello World!!"])

  // データからURLを生成する
  let objectURL = window.URL.createObjectURL(downloadData)

  // 生成したURLをaタグのリンク先(href属性)に設定する
  let linkTag = document.getElementById("downloadLink")
  linkTag.setAttribute('href', objectURL)

  // aタグにdownload属性を設定する
  // (第二引数はダウンロード時のファイル名)
  linkTag.setAttribute('download', 'sample.txt')
}
</script>

<body>
  <!-- aタグのonClick属性に上記関数を設定しておき、クリックでダウンロードが行われるようにしておく-->
  <a id="downloadLink" href="#" onClick="downloadFile()">download</a>
</body>
</html>

実際に実装すると以下のようなリンクになります。

download

クリックすると”Hellow World!!”と書かれたsample.txtがダウンロードされるはずです。

今回の記事は以上となります。