JavaScriptで印刷ボタンを実装したので
print()メソッドの使い方や学んだことを備忘録もかねて紹介いたします。
大きく分けて紹介するのは下記の２つです。
・print()メソッドのサンプルコードと使い方
・特定の部分のみの印刷
print()メソッドの基本
JavaScriptでは１行で印刷するためのコードを書くことができます。
まずは基礎として、HTMLだけでボタンをクリックして実行する
印刷ボタンの作り方について説明致します。
クリックで実行される処理（onclick=）にwindow.print()を直接書くことで
簡単に印刷用のボタン、リンクを作ることができます。
See the Pen ExYvqOp by yokoyama.hiroyuki (@yokoyama1991) on CodePen.0
簡単ですよね。
jQueryで書く場合は次のようになります。
指定のクラスにclickイベントをつけてwindow.print()を実行するだけです。
See the Pen xxKXKwB by yokoyama.hiroyuki (@yokoyama1991) on CodePen.0
特定の部分のみの印刷
問合せフォームなどの確認画面で「特定の部分のみ印刷したい！」という時に重宝します。
一時的に印刷対象外の箇所を非表示にさせる処理を記述し
印刷ダイアログから戻ってきたらその箇所の表示も戻すようにするという方法です。
See the Pen BaBwBQW by yokoyama.hiroyuki (@yokoyama1991) on CodePen.0
ヘッダー・フッダーを「hide()」メソッドで非表示にしwindow.print()後に
「show()」メソッドで表示させ、元に戻しています。
CSSを使用し非表示
CSSの「display:none;」を使用し非表示にするということもできます。
この場合は、印刷時にだけ適用されるCSS「@media print」に指定のクラスを書き
「display:none;」を使用します。
See the Pen KKPXPJG by yokoyama.hiroyuki (@yokoyama1991) on CodePen.0
この処理を記述する際の注意点は、印刷時に適用されるので
ボタンを押した時の印刷だけではなく、全体印刷の時も非表示になるということです。
要件によって使い分けましょう。
エリアに分けて印刷
同一ページ内で、エリアに分けて印刷します。
クーポン等の画面でよく見る形です。
印刷ボタンは、見栄えが悪いので先ほどのCSSの処理で非表示にしています。
See the Pen PoYJoqQ by yokoyama.hiroyuki (@yokoyama1991) on CodePen.0
「個別印刷」ボタンをクリックすると、クリックしたエリアのクーポンをプリント。
「一括印刷」ボタンをクリックすると生卵無料券、ご飯大盛り無料券の両方をプリントします。
プリント用の要素「#print」を作成し、それ以外の要素に非表示用のクラス「print-off」を指定
window.print()実行後に「#print」と「print-off」を削除という処理です。
まとめ
いかがだったでしょうか？
一見簡単そうな処理でも印刷エリアを分けたり
CSSの記述が入ったりするとコードが複雑になっていきます。
閉じタグやボタンの位置によっては、思ったようにCSSが効いてくれなかったり
指定した範囲を印刷できなかったりと、思わぬところに落とし穴があるので注意しましょう！！
