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

HTML

最近やってます。PDFによる出力をするのがベストなんですが、そこまで凝る必要の無さそうな画面はブラウザのページ印刷で補えないかと提案して、いくつかの印刷機能で採用されることになりました。

もちろん単純に印刷するのではありません。印刷用のスタイルシートを指定して、必要の無い項目は消し、必要な項目を追加しています。たとえば

  • 画面上のボタンなんかは必要ないので消して欲しい
  • メモを書き込む欄が欲しいからメモ欄を出して欲しい
  • 帳票にはこの列がいらないから、印刷時には消して欲しい

こういう要望は全てスタイルシートで実現する事ができます。印刷用のスタイルシートを指定しておくと、実際の画面の見た目とは異なるものを印刷することができます。印刷の時だけ適用されるスタイルシートの指定方法はlinkタグのmedia属性にprintを指定します。普通に表示される画面用のスタイルシートはmedia="screen"と指定します。

↓画面用
<link rel="stylesheet" href="screen.css" type="text/css" media="screen">
↓印刷用
<link rel="stylesheet" href="print.css" type="text/css" media="print">

項目の表示、非表示は単純にスタイルシートのdisplay属性を使用します。印刷時に消したい項目にあらかじめスタイルシートのクラスを指定しておくだけです。例えば印刷時にボタンを消したい場合

<style media="print">
    .NoPrint { display:none; }
</style>

<input type="submit" value="送信！" class="NoPrint">

こんな感じですね。これの問題は印刷用紙の方向がデフォルトで縦になっているので、縦に印刷されるのを意識したHTMLにするか、毎度印刷用紙の方向を横に設定してもらう必要があるということです。

これで要求が満たせるのなら帳票定義を作ったり、プログラムを作ったりするより遥かに工数が浮きます。レイアウトもHTMLなので帳票のように自由とはいきませんが、簡単にデザインができます。もし適用できそうな箇所があったら、試してみてはいかがでしょう？