ヒビノログ

個人的なメモを淡々と記録していくブログ。最近はLaravelやスマートフォンの話題など。

Google Chrome + print.css で気をつけること

Google Chromeで、print.cssを使っているページを印刷する場合。

印刷実行すると、Chromeは表示している画面の中で、URLからページ情報を再取得してprint.cssをもとに描画し、プリンタへ出力した後に、もう1度画面を描画しなおす、という処理を行っているみたい。

今回ハマったのは、ページを表示した後に、ページ上のFlashを操作すると呼び出されるJavaScriptで、divの中を書き換えた画面を印刷しようとしたら、表示直後の状態が印刷された、というもの。print.cssでは文字に枠を付けたり、前述のFlashを非表示にする記述をしてました。

ちなみにIEFirefoxでは書き換わった状態で印刷されるし、Chromeでもprint.css を使わなければ問題無い。

プレビュー機能が無かったり、まだ印刷に関しては発展途上な感じのChromeなので、プリントアウト系の確認をするときは少し気にかけておいた方がいいかも。いずれ解消されると思うけど。