Reactで印刷 - ohbarye

Reactで印刷

Reactアプリケーションで帳票印刷用の画面を作るメモ

react-to-print使う

react-to-printを使ってReact.jsでDOMを印刷する

material-uiとCSSで頑張る

Material-UIでテーマを切り替えられるようにする

displayPrintプロパティが使える

code:box.jsx

<Box display="block" displayPrint="none">

Screen Only (Hide on print only)

</Box>

<Box display="none" displayPrint="block">

Print Only (Hide on screen only)

</Box>

cssで特定の要素以外を非表示にする

FigmaやAdobeでデザインしてSVGで書き出す

ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡

全体的に有用な印刷画面の知見

そろそろ真面目に、HTMLで帳票を描く話をしようか