javascript・FileAPIを用いてテキストファイルを出力する

.txtファイルを出力する

• 関数の例です！そのままコピペで使えます。

export default function saveTextToFile(text: string, filename: string) {
  const blob = new Blob([text], { type: 'text/plain' });
  const blobUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = blobUrl;
  link.download = filename;
  link.click();
}

FileAPI

詳細

引数

export default function saveTextToFile(text: string, filename: string):

• textは保存したいテキストデータを指定します。
• filenameは保存するファイルの名前を指定します。

Blobオブジェクト

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

• この行では、Blob オブジェクトを生成しています。Blob オブジェクトは、バイナリデータを格納するためのコンテナのようなもので、ここではテキストデータを格納します。引数のtextデータを [text] の配列として渡し、type: 'text/plain' オプションを指定して、テキストファイルとして認識されるようにしています。
  Blob オブジェクト

ダウンロード用の一時的なURL

const blobUrl = window.URL.createObjectURL(blob):

• この行では、先ほど作成した Blob オブジェクトを使用して、ブラウザ内で一時的なURLを生成しています。このURLは、後でファイルをダウンロードするために使用されます。

アンカーの作成

const link = document.createElement('a'):

• 新しい a（アンカー）要素を生成し、それを link 変数に格納しています。このアンカー要素は、ユーザーがクリックしてファイルをダウンロードするためのリンクを提供します。

ハイパーリンク先を指定

link.href = blobUrl:

• アンカー要素の href プロパティに、先ほど生成したBlobのURL (blobUrl) を設定しています。これにより、アンカー要素がダウンロード用のリンクとして機能するようになります。

downloadプロパティにファイル名を指定

link.download = filename:

アンカー要素の download プロパティに、指定されたファイル名 (filename) を設定しています。これにより、ユーザーがリンクをクリックしたときに、ダウンロードされるファイルの名前が指定された名前になります。
aタグ詳細

自動的にリンクを開く

link.click():

• 最後に、JavaScriptコードで click() メソッドを呼び出すことで、ユーザーにダウンロードリンクを自動的にクリックさせ、ファイルをダウンロードさせます。

この関数を呼び出すと、指定したテキストデータがファイルとしてダウンロードされ、ユーザーに保存されたテキストファイルを提供することができます。ぜひ試してみてください！