概要

textareaで入力した文字列をファイルで保存するための最低限のサンプルを実装する。

実装方針

外部ライブラリを使用せず最低限の実装にする。
String を Blob 化する。
Blob を URL.createObjectURL を使用してオブジェクトのURLを作成する。
ダウンロード用のaタグを生成して、上記で作成したURLをJavaScript上でクリックするようにする。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Blob Sample</title>
  <script>
    function save() {
      // テキストエリアより文字列を取得
      const txt = document.getElementById('txt').value;
      if (!txt) { return; }

      // 文字列をBlob化
      const blob = new Blob([txt], { type: 'text/plain' });

      // ダウンロード用のaタグ生成
      const a = document.createElement('a');
      a.href =  URL.createObjectURL(blob);
      a.download = 'sample.txt';
      a.click();
    };
  </script>
</head>
<body>
  <button onclick="save();">Save Text</button>
  <br />
  <textarea id="txt" cols="50" rows="5"></textarea>
</body>
</html>