やりたかった事
あるWebサービスからCSV形式でデータをエクスポート出来るのですが、そのデータからちょっとした帳票を印刷したいという要望がありました。
そこでなるべく手っ取り早く、ブラウザだけで動くものが出来ないかと考えて作ってみたのが今回のプログラムです。
大まかな流れは、
- ローカルフォルダにあるCSVファイルを指定するとブラウザ上のJavaScriptでその内容を読み込む。
- 読み込んだ内容からHTMLで帳票を生成して表示する。
- ブラウザの印刷機能を使って手動で印刷またはPDFとして保存する。
CSVファイルの例
作成したい帳票
実際に動いているもの
https://mikehibm.github.io/react-csv-example/
1. プロジェクトを作成する
プロジェクトは前回のエントリーと同様に Create React App + TypeScriptで作ることにします。
npm install -g create-react-app
create-react-app my-app --scripts-version=react-scripts-ts
cd my-app/
npm start
FileSelect.tsx と Report.tsx というファイルを新規作成して、App.tsx からこれらを呼び出して使うようにします。
最初は FileSelect コンポーネントを表示してCSVファイルの選択を行い、ボタンがクリックされたらファイルの内容を読み取って、Report コンポーネントに渡します。
Report コンポーネントが表示されている時は FileSelect コンポーネントは非表示になるようにします。
2. JavaScriptでCSVファイルの内容を読み込む
HTML5のFile APIを使います。FileReaderでの読み込みは非同期処理なので、処理をラップしてPromiseを返す関数を作りました。
3. ファイルの内容をパースしてオブジェクトの配列に変換する
上の readFileAsText() からファイル全体の内容が文字列として返ってくるので、それをパースしてオブジェクトの配列に変換します。
具体的には、まず改行文字で区切って行単位の配列に分け、さらにその各行について「,」で区切って列単位の配列に分けます。つまり最終的には string[][] （文字列の配列の配列）になります。
ここでは簡単に改行文字(\n)と「,」で区切っているだけですが、実際には改行文字が違う、値に「,」が含まれている、などさまざまなケースがあり得るのでCSVのパース処理はちゃんとやろうとすると実は結構大変です。
なので必要であれば下の記事で紹介されている csv-parser などを使った方が良いかもしれません。
ブラウザ上でCSVファイルをパースする
https://qiita.com/ledsun/items/e38ee0dff8f26bf8d930
その後、文字列の配列（の配列）から、今度は帳票を生成する時に扱いやすいように、WorkItemというクラスのインスタンスの配列に変換します。
この時に、文字列型から日付型への変換や、CSVファイルに無い項目の値(duration)の計算なども同時に行っています。
4. HTMLで帳票を生成する
WorkItemオブジェクトの配列を受け取って、tableタグで表形式のHTMLに変換します。
本当は帳票のタイトル、見出し、明細行などをそれぞれ別のコンポーネントに分けた方が良いのだと思いますが、今回はあまり時間がなかったので1コンポーネントで作ってしまいました。
あとは画面に表示された帳票をブラウザの印刷機能で印刷するだけです。デフォルトではおそらく余計なヘッダーやフッター（ページタイトルやURL）も印刷されてしまいますが、印刷時の設定画面でこれらをオフにしておけばきれいに出力されるはずです。
今回作ったアプリの全ソースコードは下記にあります。
https://github.com/mikehibm/react-csv-example