CSVファイルでダウンロード in React

安藤(プログラマー)
演劇もやっていまする。

どうも、ご無沙汰しております。
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 子コンポーネントがない場合に使用するテキスト

で、使い方としては、

1
import CsvCreator from 'react-csv-creator';

でimportして、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// ヘッダー
const headers = [{
  // ヘッダー名
  id: 'name',
  display: 'name column'
}, {
  id: 'age',
  display: 'age column'
}];

// データ内容
const rows = [{
  name: 'hoge',
  age: '20'
}, {
  name: 'hage',
  age: '40'
}];

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

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

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

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

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

そんなときは、

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

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

もちろん、

1
2
3
4
5
6
7
<CsvCreator
  filename='my_csv'
  headers={headers}
  rows={rows}
  text'ここをクリックしたらダウンロードやで'
  disabled={true}
/>

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

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