jQueryで特定の範囲だけを印刷する方法

ユーザーにWEBページを印刷(プリントアウト)させたいとき、「このページを印刷する」というようなボタンを設置して、クリックすると印刷用のウィンドウが開くといった仕組みをよく使います。 普通に印刷するとページ全体が印刷されていまいますので、ページの特定の範囲だけを印刷する方法、また特定の範囲が複数あったとき個別に印刷する方法を紹介します。

ページ全体を印刷する

まずは普通にページ全体を印刷する方法です。この場合はとても簡単でボタンの要素にイベントを追加するだけです。

HTML

jQueryで書くと以下のようになります。

jQuery

特定の範囲だけを印刷する

ヘッダー・フッター・サイドバーなどを省いた、コンテンツの部分だけを印刷させたいという場合が一番多いと思います。

まずは印刷用のCSSを設置します。link要素のmedia属性の値を「print」にすると印刷専用のCSSになります。

HTML

CSSの中身はこれだけでOKです。

CSS

または、既存のCSSの中に以下のように記述する方法もあります。

CSS

印刷ボタンをクリックしたときに、印刷したい特定の範囲以外の要素に「print」というクラスを追加します。このクラスが追加された部分は「display:none(非表示)」になるので、結果的に特定の範囲だけが印刷できるようになります。

jQuery

複数の範囲を個別に印刷する

印刷したい特定の範囲がページ内に複数あって、その一つ一つを個別に印刷したい場合があります。例えばオンラインクーポンのページに複数のクーポンがあった場合、使いたいクーポンだけを個別に印刷する事ができれば便利です。

先ほどと同じCSSを設置します。

HTML
CSS

HTMLを仮に以下のように設定します。各クーポンの下に印刷ボタンがあるイメージです。

HTML

印刷ボタンがクリックされたら、先ほどのようにヘッダー・フッター・サイドバーなどを非表示にする事に加えて、印刷しないその他のクーポンも非表示にします。

jQuery
ハンバーガー100円引き
フライドポテト増量
ドリンク1杯無料サービス
最終更新日:2017/08/23