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

jQueryでWEBサイトを印刷する印刷ボタンを設置する方法をサンプルコード付きで解説します。WEBサイト全体を印刷するボタンや、対象を絞り込んで印刷する方法を紹介します。

コンテンツ [表示]

  1. 1jQueryでWEBサイトの印刷ボタンを設置したい
  2. 2jQueryでWEBサイトの印刷ボタンを設置する方法
  3. 2.1WEBサイト全体を印刷する
  4. 2.2印刷する対象を絞り込む

jQueryでWEBサイトの印刷ボタンを設置したい

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

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

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

Photo byPexels

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

WEBサイト全体を印刷する

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

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

印刷ダイアログ
このように印刷ダイアログ(印刷プレビュー)が開き、WEBサイトをプリンターに送信してプリントしたり、PDFに保存することが出来ます。

印刷する対象を絞り込む

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

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

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

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

GeekHive採用サイト

関連記事