PayPay での月別の売り上げを印刷しようとしたところ、PCのブラウザ(Edge)で表示される見た目と、印刷プレビューの見た目が異なっていました。
■PCで印刷しようとした画面
![](https://qchannel.net/wp-content/uploads/2022/08/7991b0dbed2af18d8471aa5fe8d8fb42-1-1024x501.png)
■印刷プレビューの表示
![](https://qchannel.net/wp-content/uploads/2022/08/0c5ed9430cd1db7a89538a009c22b6e0-1-1024x499.png)
PCで表示している通りに印刷できるか試したことなど記事にします。
表示していたサイト(PayPay for Business)について
PayPay for Business は、表示するデバイスに応じて、サイトの表示が変わるようでした。
PC、タブレット、スマホで表示が異なりました。
■PC(Edge)
![](https://qchannel.net/wp-content/uploads/2022/08/7991b0dbed2af18d8471aa5fe8d8fb42-1-1024x501.png)
■タブレット(10インチ)
![](https://qchannel.net/wp-content/uploads/2022/08/Screenshot_20220824-100002-1-684x1024.jpg)
■スマホ(6.3インチ)
![](https://qchannel.net/wp-content/uploads/2022/08/Screenshot_20220824-100057-1-541x1024.png)
また、PCでブラウザのウインドウの幅を小さくすると、タブレットやスマホの表示になるようでした。
ブラウザの表示通りに印刷できるか試したこと
ブラウザで表示されている通りに印刷できる方法があるか試してみました。
用紙設定の縦・横を変えてみる
用紙を横にすることで、幅が広くなるためか、プレビューはブラウザの表示に近くなりました。
■PC(Edge、用紙が縦の場合)
![](https://qchannel.net/wp-content/uploads/2022/08/0c5ed9430cd1db7a89538a009c22b6e0-1-1024x499.png)
■PC(Edge、用紙が横の場合)
![](https://qchannel.net/wp-content/uploads/2022/08/fbb84c5bb1f28e2879985d56c8275671-1-1024x502.png)
拡大/縮小の倍率を変えてみる
倍率を下げる(100→90)と、プレビューはブラウザの表示に近くなりました。
相対的に表示できる幅が広くなったためと思われます。
■PC(Edge、倍率100%)
![](https://qchannel.net/wp-content/uploads/2022/08/3af4f2be90f8c91d0e32ee4543ca7909-1024x501.png)
■PC(Edge、倍率90%)
![](https://qchannel.net/wp-content/uploads/2022/08/68c4444a359d94d7a1d0341df950f287-1024x496.png)
ブラウザを変えてみる
ブラウザによってプレビューが変わるか確認しました。
用紙は縦、拡大/縮小の倍率は100%でそろえました。
FireFoxのプレビューはブラウザの表示に近いものでした。
■Edge
![](https://qchannel.net/wp-content/uploads/2022/08/0c5ed9430cd1db7a89538a009c22b6e0-1-1024x499.png)
■Chrome
![](https://qchannel.net/wp-content/uploads/2022/08/2b352b399981e78265a43c778f818bb8-1-1024x501.png)
■FireFox
![](https://qchannel.net/wp-content/uploads/2022/08/9bf84f1757bbd6367ba6dd1051b7ccb1-1024x491.png)
結論:ページによってはブラウザの表示通りに印刷できないと思われる
確認したページでは、今回試した方法ではブラウザの表示通りに印刷できませんでした。
同サイト(PayPay for Business)の別のページでは、今回試した方法でブラウザの表示通りに印刷できるページもあったので、ページの実装方法に依存すると思われます。
ちなみにPDFへの出力はプレビュー通りに出力されるようなので、「PDFなら解決できる。」ということはないと思います。
どうしてもブラウザの表示通りに印刷するのであれば、スクリーンショットをとり、それを印刷するのではないかと思います。
コメント