javascript でテキストをファイルにダウンロードするには

サーバーから受け取ったデータを、テキストやCSVにしてローカルにダウンロードしたいときのコードになります。

サンプル

<html>
<head>
	<meta charset="utf-8" />
	<script>
function downloadText(fileName, text) {
  const blob = new Blob([text], { type: 'text/plain' });
  const aTag = document.createElement('a');
  aTag.href = URL.createObjectURL(blob);
  aTag.target = '_blank';
  aTag.download = fileName;
  aTag.click();
  URL.revokeObjectURL(aTag.href);
}
	</script>
</head>
	<body>
		<button onClick='downloadText("sample.txt", "一富士二鷹三茄子")'>text download</button>
	</body>
<html>

動作は Chrome 91、Safari 14.1.1 で確認しました。

解説

<button onClick='downloadText("sample.txt", "一富士二鷹三茄子")'>text download</button>

ボタンをクリックしたとき、”一富士二鷹三茄子”というテキストを、「sample.txt」ファイルでダウンロードするように、downloadText 関数を呼び出します。

function downloadText(fileName, text) {
  const blob = new Blob([text], { type: 'text/plain' });
  const aTag = document.createElement('a');
  aTag.href = URL.createObjectURL(blob);
  aTag.target = '_blank';
  aTag.download = fileName;
  aTag.click();
  URL.revokeObjectURL(aTag.href);
}

downloadText の各行でやっていることは、

  const blob = new Blob([text], { type: 'text/plain' });

ダウンロードするデータを生成します。
テキストを書き出すので、2つ目の引数は { type: ‘text/plain’ } にしています。
CSV を書き出すときは、{ type: ‘text/csv’ } にするなど、対象の MIME を指定します。

  const aTag = document.createElement('a');

ダウンロードは、A タグのクリックをコード上ですることで発火させます。
作成した A タグは create したまま、DOMに追加しないので、ユーザーからは見えません。

  aTag.href = URL.createObjectURL(blob);

A タグが指すリンク先として、ダウンロードするデータを設定します。

  aTag.target = '_blank';

リンク先を新しいタブで開くようにします。
ファイルのダウンロードなので、開いたタブは残りません。

  aTag.download = fileName;

ダウンロードするときのファイル名を設定します。

  aTag.click();

A タグをクリックしたことにして、ファイルのダウンロードを行います。

  URL.revokeObjectURL(aTag.href);

createObjectURL で作成したオブジェクトを解放します。

おわりに

javascript 上で生成したちょっとしたテキストデータを、ローカルにダウンロードしたいときは、このような形で簡単に行うことができます。

プロを目指す人のためのTypeScript入門 (Amazon)

コメント