こんにちは、広野です。
React アプリ内で表示しているテーブルなどの JSON データを、CSV ファイルとしてローカルにダウンロードしたいケースがあります。そんなとき、手作りで画面UIやデータ加工処理を作るのは非常に面倒で、私は react-papaparse というモジュールを使っています。
以前、別の記事で react-papaparse を使ったローカル CSV ファイルのインポート、JSON 変換の方法を紹介しましたが、本記事はその逆パターンの紹介になります。
やりたいこと
- React アプリ画面内にある（正確には、アプリのメモリ内にある）JSON データをローカルに CSV でダウンロードしたい。
環境
- React 18
- react-papaparse 4.0.2
サンプル画面イメージ
ここでは、以下の公式サイト内で紹介されている CSVDownloader の機能を使用します。
公式サイトにはサンプル画面はありませんが、実際に実装すると以下のようなボタンが作成されます。
（デザインはどノーマルすぎるので加工したいですね・・・）
サンプルコード
react-papaparse の CSVDownloader は、v4 からは import したモジュールだけでは動かず、JavaScript (JSX) で書かれた公式サンプルコードを元に自分でコードを書き換える必要があります。
公式サンプルコード
実際に書き換えたコード
ダウンロード機能に特化した共用コンポーネントと、ボタンを表示させるコードに分けています。
共用コンポーネント
- CSVDownloader.js
import * as React from 'react';
import { useCSVDownloader } from 'react-papaparse';
//現在日時取得関数 YYYYMMDDHHMMMのフォーマットで現在日時を取得、ファイル名のsuffixとして付ける
const padZero = (num) => {
return (num < 10 ? "0" : "") + num;
};
const getCurrentDatetime = () => {
const now = new Date();
return "" + now.getFullYear() + padZero(now.getMonth() + 1) + padZero(now.getDate()) + padZero(now.getHours()) + padZero(now.getMinutes());
};
//CSVダウンロード関数 呼び出されるときに、パラメータとしてファイル名prefix、ボタン名、JSONデータをもらう
const CSVDownloader = (props) => {
const { CSVDownloader, Type } = useCSVDownloader();
const filename = props.filenameprefix + "_" + getCurrentDatetime();
return (
<CSVDownloader type={Type.Button} filename={filename} bom={true} config={{delimiter:","}} data={props.data}>
{props.buttonname}
</CSVDownloader>
);
};
export default CSVDownloader;
ボタンを表示させるコード
ダウンロード用ボタンを表示させたい箇所に、共用コンポーネントを import し、以下のコードを書いてデータ等を渡します。
import CSVDownloader from './CSVDownloader'; //パスはコードの配置場所によって変更する
//中略
<CSVDownloader data={jsondata} filenameprefix="export" buttonname="CSVエクスポート" />
ダウンロード例
ダウンロードしたい JSON データと、ダウンロード後の CSV データの例です。
ダウンロードしたい JSON データ
[
{
"menu": "menu1",
"id": 1,
"neta": "いか"
},
{
"menu": "menu1",
"id": 2,
"neta": "たこ"
},
{
"menu": "menu2",
"id": 1,
"neta": "海鮮丼"
}
]
ダウンロード後の CSV データ
menu,id,neta menu1,1,いか menu1,2,たこ menu2,1,海鮮丼
単純な JSON データであれば、細かい設定なしに簡単に JSON から CSV 変換をしてくれます。
本記事のコード例ですと、ファイル名は export_yyyymmddhhmm.csv になります。
まとめ
いかがでしたでしょうか？
React アプリ内に JSON データさえあれば、簡単に CSV ダウンロード機能は作れてしまいます。
本記事が皆様のお役に立てれば幸いです。