Zenn
📑

テキストエリアの内容をファイルにダウンロードする方法

2023/09/28に公開
CSS
HTML
JavaScript
blob
tech

はじめに

今回は、Javascriptでテキストをファイルとしてダウンロードする方法について調査し、理解を深めるためにまとめました。

実装

HTMLとCSSの実装

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles.css">
  <title>Document</title>
</head>
<body>
  <textarea id="textarea"></textarea>
  <button id="download">ダウンロード</button>
  <script src="./download.js"></script>
</body>
</html>
styles.css
textarea {
  width: 400px;
  height: 300px;
}

すると以下のようになります。

今回は機能の実装がメインなので、簡単なものしています。
Javascriptの実装

download.js
document.querySelector('#download').addEventListener('click', () => {
  const output = document.querySelector('#textarea').value;
  downloadAsFile(output, "download.txt");
});

function downloadAsFile(text, filename) {
  const blob = new Blob([text], { type: "text/plain"});
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

詳細説明

document.querySelector('#download').addEventListener('click', () => {
  const output = document.querySelector('#textarea').value;
  downloadAsFile(output, "download.txt");
});

ここではダウンロードボタンを押した時にテキストエリアに入力した値を入手してoutputに格納し、ファイルに出力する関数に渡しています。

それでは関数の中身を見ていきましょう。

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

ここではBlobのインスタンスを作成しています。Blobオブジェクトは不変の生のデータを表すオブジェクトです。テキストはバイナリデータを含むことができます。Blobの最初の引数にテキストエリアから入手したtextを代入し、typeにテキストデータを指定しています。

  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;

ここではURL.createObjectURL() を使用してしていされたオブジェクトを表すURLを含む文字列を作成します。その作成したurlを別で作ったaタグのhrefに格納します。またdownlodに出力するファイル名を格納します。

  document.body.appendChild(a);
  a.click();

作成したaタグをbody要素に追加して、クリックします。これによってファイルがダウンロードされます。

  document.body.removeChild(a);
  URL.revokeObjectURL(url);

作成したaタグの削除とオブジェクトURLの開放を行います。

おわりに

今回は簡単ですが、ファイルのダウンロードに関して記載しました。もし間違いなどがあれば、コメントなどで教えていただけると嬉しいです。

参考文献

JAVASCRIPT.INFO Blob
MIMEタイプ

Discussion