前置き

現在の関わっているReactプロジェクトでPDFの帳票を作ってダウンロードをさせるという部分があり、チームとして開発した知見を公開します。

使うもの

どうするのか

まずGoggleで「react pdf」検索すると出てくるのがQiitaのこの記事です。
https://qiita.com/maecho/items/071abbb60dcbeabef7a6
https://qiita.com/rio1228/items/dbab910036d54487f6b9

しかしながら、この記事ではpdfmakeの素の文字機能を使っており、日本語でのPDF帳票ができるところまでなかなか難しい。
今回紹介する方法ではDOMをcanvasにしてしまっているので、それをPDFに出力すればOKです。

この方法であれば、Webフォントをどれでも使うことができるし、手軽にWEBの技術のレイアウトで帳票を作れるので、もしこういう課題にあったら参考になると思います。

必要なライブラリのインストール

npm install --save html2canvas pdfmake

参考のソースはCodesandboxに作ったのでこちらを見てください。
StyledComponentsなのでCSSはなるだけ読み込みたくない！という思想でpaper.cssの内容をinjectGlobalしています。

~~もしも画面内プレビューがいらない場合は、印刷するコンテンツをこのようにすっ飛ばすと良いようです。~~
印刷する要素が画面内にあるとCanvasにする時に大きく崩れることがあるみたいなので、印刷するelementは画面外にすっ飛ばしてください。(もっといいやり方があるかもしれないので調査必要)
プレビューは同じコンポーネントを見える範囲に配置してください

paper.cssを完全styled-componentsにしたり、logic.jsを単体のnpmライブラリにしちゃっていいんじゃないのという発展も考えられますが、まずは公開することが大事なので暇があればやります。
あとこのやり方、今は複数ページ印刷にも対応してないです。
高さが固定してないページのPDF化も対応してないです。