続：帳票印刷をブラウザの印刷機能で代替する

とりあえずデモ用に作ったスタイルシート

<style media="screen">
    .NoPrint  { display : block; }
    .YesPrint { display : none;  }
</style>

<style media="print">
    .NoPrint  { display : none;  }
    .YesPrint { display : block; }
</style>
※ここに載せるために行だのスペースだのを圧縮してます。

画面表示時には見せたくなくて、印刷時にだけ見せたい箇所にclass="YesPrint"と書き、画面表示時にだけ見えていて、印刷時には見せたくない箇所にはclass="NoPrint"と書く。あとから考えてみれば、すごいかっこわるいクラス名…PrintTargetとかにしておけば良かったけど、とりあえずデモ用だからいっか。

それでmedia="screen"と"print"を入れ替えると、わざわざ印刷しなくても画面上で印刷時のイメージを確認できます。印刷プレビューでも確認する事ができます。