📝
Blob を利用したcsvファイルのエクスポート機能の実装
概要
ライブラリを使わずに、Blobを利用してcsvファイルをエクスポートしてみました。
Blobとは
Blobは、バイナリデータを表すオブジェクトです。Blobは、ファイルや画像、動画などのメディアデータを表すことができます。
Blobを利用したcsvファイルのエクスポート
Blobを作成する
今回のケースでは、Blobを作成するために、以下のような要素で構成されたCSVを作成することを目的とします。
キーワード,項目,1,2,3,4,5
キーワード,項目,サンプル,サンプル,サンプル,サンプル,サンプル
,URL,https://example.com/,https://example.com/,https://example.com/,https://example.com/,https://example.com/
csvに書き出したいデータを以下のように定義します。
定義したデータを、Blobに変換し、setAttributeでdownload属性を付与します。
最後に、clickイベントを発火させることで、ダウンロードが開始されます。
import dayjs from 'dayjs'
const csvHeader = ['キーワード', '項目', ...Array.from(Array(5).keys()).map((i) => i + 1)]
const csvRowTitle = ['キーワード', '項目', ...Array.from(Array(5).keys()).map(() => "サンプル")]
const csvRowURL = [null, 'URL', ...Array.from(Array(5).keys()).map(() => "https://example.com/")]
// CSV形式で書き出すため改行を各行に追加する
csvHeader[csvHeader.length - 1] = csvHeader[csvHeader.length - 1] + '\n'
csvRowTitle[csvRowTitle.length - 1] = csvRowTitle[csvRowTitle.length - 1] + '\n'
csvRowURL[csvRowURL.length - 1] = csvRowURL[csvRowURL.length - 1] + '\n'
const csvBody = Array(csvRowTitle + csvRowURL)
const csvContent = csvHeader.toString() + csvBody.join('')
const blob = new Blob([csvContent], {type: 'text/csv'})
const url = URL.createObjectURL(blob)
const link = document.createElement('a')
const today = dayjs().format('YYYYMMDD')
link.setAttribute('href', url)
link.setAttribute('download', `${today}_recipe_export.csv`)
link.click()
まとめ
Blobを利用することで、ライブラリを使わずに、csvファイルをエクスポートすることができました。
基本的には npm 等でライブラリをインストールすることで、簡単に実装できるので、Blobを利用する必要があるかどうかは、検討してみてください。
今回は、簡易的な実装を目的として、Blobを利用しました。
Discussion