📘
Reactで実装する印刷機能
Reactで印刷するならreact-to-print一択です。
issueにバグが多く、開発者も１人ですが（2023年12月時点）
他に代替するものがないというのが現状です。
印刷実装ならではの考慮しないといけないこと
①CSS崩れ
CSSが実際の印刷物とプレビュー、画面に表示しているものの３者でずれることは多々あります。
②印刷物が縦なのか横なのか
@media print {
size: A4 landscape; /* A4横指定 */
}
@media print {
size: A4 portrait; /* A4縦指定 */
}
③border消える時がある。
④複数枚印刷する時にページの区切りをどうするか
特にリストをそのまま複数枚コピーすると、セルの中でページが分割されてしまうこともあるので
エンジニアはこのあたりデザイナーとかなり綿密に相談しないといけない。
印刷のデザインに慣れているデザイナーも少ないのでエンジニアドリブンでどんどんやりとりしないといけない。
Discussion