javascript・FileAPIを用いてcsvダウンロード

使用例

• 以下の関数をそのままコピペで使えます！

export default function saveCSVToFile(csvData: string, filename: string) {
  const csvBlob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
  const blobUrl = window.URL.createObjectURL(csvBlob);
  const link = document.createElement('a');
  link.href = blobUrl;
  link.download = filename;
  link.click();
  window.URL.revokeObjectURL(blobUrl);
}

  const Data = ['apple', 'banana', 'orange'];
  const CSVDownloadTrigger = () => {
    const csvData = Data.join(', ');
    saveCSVToFile(csvData, 'csvファイル.csv');
  };

解説

引数

export default function saveCSVToFile(csvData: string, filename: string) {

• csvDataで出力したいデータを渡します。string指定なので、関数を呼び出す際に少し工夫が必要です。適宜join関数やconcat関数を用いてください。ちなみに改行は.join('\n')このようにするとcsvをダウンロードした際に改行して表示されます。
• filenameは保存するファイルの名前を指定します。

関数を呼び出す例

  const Data = ['apple', 'banana', 'orange'];
  const CSVDownloadTrigger = () => {
    const csvData = Data.join(', ');
    saveCSVToFile(csvData, 'csvファイル.csv');
  };

Blobオブジェクト

const csvBlob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });

• この行では、Blob オブジェクトを生成しています。Blob オブジェクトは、バイナリデータを格納するためのコンテナのようなもので、ここではテキストデータを格納します。
  Blob オブジェクト

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

const blobUrl = window.URL.createObjectURL(csvBlob);

• この行では、先ほど作成した 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() メソッドを呼び出すことで、ユーザーにダウンロードリンクを自動的にクリックさせ、ファイルをダウンロードさせます。

この関数を呼び出すと、指定したデータがcsvファイルとしてダウンロードされます。ぜひ試してみてください！