jQueryでWEBサイトの印刷ボタンを設置する方法！

WEBサイトの印刷ボタンを設置して、ボタンを押すとWEBサイトの印刷プレビューが表示し、印刷することが出来ます。

JavaScriptで可能ですが、印刷するWEBサイトの範囲（対象を絞る）を決めて印刷させる際にはjQueryを使うととても簡単に出来ます。

今回はjQueryでWEBサイトの印刷ボタンを設置する方法をサンプルコード付きで解説していきます。

まずはWEBサイト全体の印刷ボタンです。下記のサンプルコードを見てみましょう。

button要素のonlick属性に対してwindow.print()を設定しています。これはHTMLを印刷するためのメソッドで、button要素のクリックすることで印刷ダイアログが開きます。

次に印刷対象を絞り込んでの印刷です。印刷対象の要素を指定するにはjQueryを使うと簡単に実現出来ます。下記のサンプルコードを見てみましょう。

HTMLの方のonclick属性でwindow.print()させるところは一緒です。

ただ今回はjQueryを使ってwindow.onbeforeprint、window.onafterprintのイベントに関数を設定し、印刷前に印刷で隠したい要素を非表示にし、印刷後に隠した要素を表示するという処理を加えています。

こうすることで、印刷時のみ要素を隠す、つまり要素を限定して印刷させる事が可能になります。