印刷画面不要！指定範囲のみ印刷できるjQueryプラグイン「jPrintArea.js」

Tweet

どーも。谷です。

最近いくつかのWEBサイト制作案件で、印刷画面のご要望を頂きました。印刷のためだけにページのテンプレートを用意するのも手間なので、簡単に指定範囲のみ印刷できるという噂のjQueryプラグイン「jPrintArea.js」を使ってみました。

何年も前からよく使われているもののようですが、本家サイトからは既に削除されているので、使ってみたい方はこちらのコードをコピーして、「jQuery.jPrintArea.js」と名前をつけて保存してください。

jQuery(document).ready(function($){
	$.jPrintArea=function(el){
	var iframe=document.createElement('IFRAME');
	var doc=null;
	$(iframe).attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
	document.body.appendChild(iframe);
	doc=iframe.contentWindow.document;
	var links=window.document.getElementsByTagName('link');
	for(var i=0;i<links.length;i++)
	if(links[i].rel.toLowerCase()=='stylesheet')
	doc.write('<link type="text/css" rel="stylesheet" href="'+links[i].href+'"></link>');
	doc.write('<div class="'+$(el).attr("class")+'">'+$(el).html()+'</div>');
	doc.close();
	iframe.contentWindow.focus();
	iframe.contentWindow.print();
	alert('指定された範囲のみプリントします');
	document.body.removeChild(iframe);
	}
});

jPrintAreaの設定方法

保存した「jQuery.jPrintArea.js」をアップロードし、jQueryの記述後に、head内で呼び出します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jPrintArea.js"></script>
<script text="javascript/text">
$(function(){
  $('#btn_print').click(function(){
    $.jPrintArea("#printarea");
  });
});
</script>

WORDPRESSで使うときは、「wp_head()」でjQueryライブラリがコールされていることがほとんどなので、「wp_head()」の後に、以下のようにして記述します。

<script src="/wp-content/themes/customize/scripts/jQuery.jPrintArea.js"></script>
<script text="javascript/text">
jQuery(document).ready(function($){
  $('#btn_print').click(function(){
    $.jPrintArea("#printarea");
  });
});
</script>

WordPressでjQueryを使う場合は、関数の書き出しに注意が必要です。
詳しくは → WordPressでのダメなjQuery関数の囲み方4パターンと対策講座

印刷したい範囲をidで囲う

<div id="printarea">

～印刷したい内容～

</div>

印刷ボタンを用意する

印刷ボタンには、id「btn_print」をつけます。

■idをつけたinputタグを使う場合

<input type="button" id="btn_print" value="印刷する">

■画像やテキストをボタンにする場合

<a href="#" id="btn_print">印刷する</a>

印刷ボタンをクリックすると、id=printareaで囲った部分のみが印刷されます。
ブラウザによって多少動きは異なりますが、一通りのブラウザで問題なく動きました。

ダイアログ部分の表示変更

クリックするとダイアログが表示され、コメントを入れられます。
コメントは

alert('指定された範囲のみプリントします');

この部分で内容に合わせて調整して下さい。

ダイアログを表示させたくない場合は、jQuery.jPrintArea.jsを以下のコードに差し替えて下さい。

jQuery(document).ready(function($){
	$.jPrintArea=function(el){
	var iframe=document.createElement('IFRAME');
	var doc=null;
	$(iframe).attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
	document.body.appendChild(iframe);
	doc=iframe.contentWindow.document;
	var links=window.document.getElementsByTagName('link');
	for(var i=0;i<links.length;i++)
	if(links[i].rel.toLowerCase()=='stylesheet')
	doc.write('<link type="text/css" rel="stylesheet" href="'+links[i].href+'"></link>');
	doc.write('<div class="'+$(el).attr("class")+'">'+$(el).html()+'</div>');
	doc.close();
	iframe.contentWindow.focus();
	setTimeout(function(){
	iframe.contentWindow.print();
	document.body.removeChild(iframe);
	}, 500);
	}
});

印刷部分のスタイルシート調整

印刷ボタンをクリックすると、#printareaで囲われた要素のみが切り抜かれて、印刷されます。
そのためCSSの記述は、#printarea内のタグに直接適用しないと、印刷時には反映されません。

たとえば、こんな構成だったとします。

印刷時には、#printarea部分のみが切り取られて印刷されるため、親要素である#contentから記述されたCSSは印刷時に反映されません。

印刷時に適用させたいCSSは、#printarea以下のタグに指定します。

/* ↓印刷時には適用されない */
#content p {
	text-align: center;
}

/* ↓印刷時にも適用される */
p {
	text-align: center;
}

これを逆手に取れば、印刷時に特定の部分だけ非表示にしたりすることもできます。

たとえば、

・印刷時には画像を非表示。
・印刷時には文字を大きくして、中央揃えにする。

この場合、以下のように記述します。

/* ↓印刷時には画像を非表示 */
img {
    display: none;
}
/* ↓通常時には画像を表示させる */
#content img {
    display: block;
}
  
/* ↓印刷時のテキスト指定 */
p {
    font-size: 2em;
    text-align: center;
}
/* ↓通常時のテキスト指定 */
#content p {
    font-size: 1em;
    text-align: left;
}

今回はシンプルに書きましたが、CSSがごちゃごちゃしてわかりにくくなったりしないように、実際に使うときは、idやclassをうまく使って綺麗にまとめましょう。!importantを使ったりしてもうまくまとまると思います。

親要素の指定と、#printarea以下の指定をうまく使い分けて対応することで、印刷時のレイアウトも細かく調整できます。

非常に便利なので、使って見てください。

それでは。

Tweet