JavaScriptでテキストファイルなどをダウンロードする方法【動画版あり】
この記事について
この記事ではフロントエンド（ブラウザ側）のJavaScriptでテキストファイルなどをダウンロードする方法について紹介します。関連リソースを下記に示します。
おおまかな流れ
おおまかな流れを下記に示します。
- コーディングの準備
- コーディング
- 動作確認
コーディングの準備
下記のコマンドを実行してコーディングの準備をします。
mkdir javascript-download-file
cd javascript-download-file
touch index.html main.js
コーディング
index.html
エディタでindex.htmlを開いて下記の内容を入力します。
main.js
エディタでmain.jsを開いて下記の内容を入力します。
ポイントを下記に示します。
- ダウンロード対象のデータのblobを作成した後、URL.createObjectURL関数を呼び出してオブジェクトURLを作成します。
- document.createElementメソッドを呼び出してanchor（aタグ）を動的に生成し、anchor.setAttributeメソッドを使ってhref属性にオブジェクトURLを設定します。また、download属性にダウンロード時のファイル名を設定します。
- MouseEventのインスタンスを作成した後、anchor.dispatchEventメソッドを呼び出して擬似的にanchorをクリックします。
動作確認
ブラウザでindex.htmlを開きます。macOSの場合は下記のコマンドが便利です。
open index.html
Webページ内の「ダウンロード」ボタンをクリックするとファイルのダウンロードが開始することを確認します。
参考にしたWebページ
この記事を作成するために参考にしたWebページを下記に示します。
おわりに
この記事で紹介した方法はmacOS Monterey 12.0.1の下記のブラウザで動作を確認しました。
- Google Chrome 101.0.4951.54
- Firefox 100.0
- Safari 15.1
同じような記事については phi さんが JavaScript Tips - 動的に入力した内容のファイルをダウンロードする方法 の記事をZennに投稿しています。
こちらの記事との違いについては、phiさんの記事で紹介している方法ではHTML中のaタグのhref属性にオブジェクトURLを設定しているのに対し、この記事で紹介している方法ではJavaScriptでaタグを動的に生成している点です。アプローチは異なりますが得られる結果は同様です。phiさんの記事で紹介している方法の方が簡潔でコード量も少ないです。一方、この記事で紹介している方法はコード量が多いですが、aタグだけではなくbuttonタグなどにも使うことができます。
MouseEventはaタグやbuttonタグのclickイベントでしか生成することができません... と思ってwindowのloadイベントでテストしてみたら普通にできてしまいました笑 前はできなかったような気がするのですが何かと勘違いしているのでしょうか？詳しい方がいらっしゃったらご指導のコメントをいただければ幸いです、その他のコメントも大歓迎です。最後までお読みいただきありがとうございました！
Discussion