印刷用CSSを使わずに特定の要素のみを印刷する

2016.01.25　Posted by Coding_team

Webプログラミング

こんにちは。

第20回目ウェブラボ技術メモです。

今回は特定の要素のみを印刷するプラグイン「printThis」を紹介したいと思います。

普段なら特定の要素のみを印刷する場合には、その印刷箇所に応じたCSSを作らなければいけません。

しかも、印刷したい箇所が同一ページ内に複数ある場合にはかなり面倒な処理が必要となります。

ですが、このプラグインを使えば、もうそんな必要はありません!！

では早速実装してみましょう。

ボタンを押すとそれに応じた写真を印刷するDEMOを作ってみたいと思います。

・GitHub

https://github.com/jasonday/printThis

まずはJquery本体と一緒にprintThis.jsを読み込ませます。

そして以下の様に印刷ボタンと印刷箇所を設定します。

<script src="js/printThis.js"></script>
<script>
$(function() {
	$('.print_btn01').click(function(){  //印刷ボタンをここで指定
	    $('.print_img01').printThis();   //印刷したい箇所をここで指定
	});
});
</script>

$(function() {

$('.print_btn01').click(function(){ //印刷ボタンをここで指定

$('.print_img01').printThis(); //印刷したい箇所をここで指定

});

</script>

次に、印刷したい箇所のHTMLは以下の通りです。

上で設定したクラス（またはID）を印刷ボタン、印刷したい箇所に対応させます。

<p class="print_img01"><img src="https://www.weblab.co.jp/demo/1601/img/img01.jpg" width="980" height="653" alt="特定の要素のみを印刷する"></p>  //印刷したい箇所
<p class="print_btn01"><a>この写真を印刷する</a></p>  //印刷ボタン

1 2	<p class="print_img01"><img src="https://www.weblab.co.jp/demo/1601/img/img01.jpg" width="980" height="653" alt="特定の要素のみを印刷する"></p> //印刷したい箇所 <p class="print_btn01"><a>この写真を印刷する</a></p> //印刷ボタン