Javascriptのprint()メソッドを使用して、印刷ボタンを設置した時の方法をメモします。
データなどを出力する場合など、WEBページを印刷することがあります。
ブラウザのヘッダーにあるメニューからページを印刷してもいいのですが、
ページ内に印刷ボタンがあった方が効率が良い場合があります。
print()メソッドを使用すると、簡単に印刷ダイアログを呼び出してページを印刷することが可能です。
また、ボタンではなくリンクで設定することも可能です。
■ print()を使用して印刷ボタンを設置
【HTML】
・ボタンで設定する場合
1 | <input type="button" value="印刷する" onclick="window.print();" /> |
・リンクで設定する場合
1 | <a href="#" onclick="window.print(); return false;">印刷する</a> |
■ 印刷用のCSSを作成する場合
印刷時に印刷するボタンやリンクなどを隠したいなど、
印刷用のスタイルを適用させたい場合があります。
head内で読み込むCSSファイルに「media=”print”」を設定します。
※印刷時にスタイルが適用されます。
1 | <link rel="stylesheet" type="text/css" href="./print.css" media="print" /> |
ページ表示用とは別に作成した方がいいと思います。
印刷に不要な部分を非表示にする場合は下記のように記述します。
【CSS】
1 2 3 | .noprint { display: none;} |
【HTML】
1 2 3 | <div class="noprint"> <a href="#" onclick="window.print(); return false;">印刷する</a></div> |
長いページなど、改ページの位置を指定したい場合は下記のように記述します。
【CSS】
1 2 3 | div.pagebreak { page-break-after: always;} |
【HTML】
1 2 3 | <div class="pagebreak"> 印刷する内容</div> |
印刷するようなページを作る場合は、印刷するボタンやリンクがあった方が楽に印刷ができると思います。
また、ブラウザのバージョンによっては、print()メソッドが使用できない場合があるようです。
