CSVファイルでダウンロード in React - 株式会社BEFOOL ブログ

どうも、ご無沙汰しております。
React を触る機会が増えてきた今日です。

せっかくなので、色々メモを残しておこうと思います。
とっちらかった内容となりますが、ご容赦願いますm(＿＿)m

データをCSVファイルでダウンロード

このご時世、ライブラリを使えば一瞬ですね。。。
CSVを扱うものはたくさんありますが、今回は disabled できるものが良かったので、 react-csv-creator にしました。

まぁ上記本家サイトに全部書いてあるんですが、日本人として日本語で書きますね。
使える props は、

名称	型	初期値	必須	説明
disabled	bool	false	false	ダウンロードを無効にする
headers	array / object	null	false	ヘッダー名
filename	string	current time	false	拡張子を抜いたファイル名（デフォルトは現在日時）
noHeader	bool	false	false	trueの場合、ファイルからヘッダーを省略
rows	array / object	null	true	名の通り、主役となるデータ
text	string	null	false	子コンポーネントがない場合に使用するテキスト

で、使い方としては、

import CsvCreator from 'react-csv-creator';

でimportして、

// ヘッダー
const headers = [{
  // ヘッダー名
  id: 'name',
  display: 'name column'
}, {
  id: 'age',
  display: 'age column'
}];
 
// データ内容
const rows = [{
  name: 'hoge',
  age: '20'
}, {
  name: 'hage',
  age: '40'
}];

ってな感じで、定義しまして、

<CsvCreator
  filename='my_csv'
  headers={headers}
  rows={rows}
>
  <p>ここをクリックしたらダウンロードやで</p>
</CsvCreator>

これで完了！
なんて簡単なんだろう・・・と思っていたらconsole様が

「CsvCreatorさんの配下にStringを置くな。子Componentしか認めんぞ。」

とお怒りになっている・・・。

そんなときは、

<CsvCreator
  filename='my_csv'
  headers={headers}
  rows={rows}
  text＝'ここをクリックしたらダウンロードやで'
/>

で、OK。
いや Usage の通りやったんだけどと思いつつ。笑

もちろん、

<CsvCreator
  filename='my_csv'
  headers={headers}
  rows={rows}
  text＝'ここをクリックしたらダウンロードやで'
  disabled={true}
/>

とすれば、ダウンロード不可にできますー。

いやーあっという間！
この業界の発展スピードが速い理由がわかりますねぇ。