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

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

ページ全体を印刷する

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

<button onclick="window.print();">このページを印刷する</button>

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

$(function(){
	$('button').click(function(){
		window.print();
	});
});

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

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

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

<link rel="stylesheet" href="print.css" media="print">

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

.print{display:none}

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

@media print{
	.print{display:none}
}

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

$(function(){
	//非表示にしたい要素
	var hide_elm = $('.header,.footer,.sidebar');
	//ボタンをクリック
	$('button').click(function(){
		//非表示
		hide_elm.addClass('print');
		//印刷
		window.print();
		//元に戻す
		hide_elm.removeClass('print');
	});
});

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

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

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

<link rel="stylesheet" href="print.css" media="print">

.print{display:none}

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

<div class="coupon">
	<div>ハンバーガー100円引き</div>
	<button>このクーポンを印刷</button>
</div>
<div class="coupon">
	<div>フライドポテト増量</div>
	<button>このクーポンを印刷</button>
</div>
<div class="coupon">
	<div>ドリンク1杯無料サービス</div>
	<button>このクーポンを印刷</button>
</div>

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

$(function(){
	//クーポンの要素
	var elm = $('.coupon');
	//非表示にしたい要素
	var hide_elm = $('.header,.footer,.sidebar,button');
	elm.each(function(i){
		elm.eq(i).find('button').click(function(){
			//非表示
			hide_elm.addClass('print');
			//その他のクーポンを非表示
			elm.not(elm.eq(i)).addClass('print');
			//印刷
			window.print();
			//元に戻す
			hide_elm.removeClass('print');
			elm.removeClass('print');
		});
	});
});