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

こんにちは。

第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>

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

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

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

たったこれだけで実装できちゃうんです！簡単ですね！！

注意事項としては、画像などを印刷する場合には絶対パスで書いてください。でないとリンク切れ扱いになってしまいます。

作成したDEMOはこちら

ちなみにIE7から使えるらしいとのこと。もう印刷用CSSを無理して用意する必要はありませんね。

クーポンや地図を載せたページなど、活躍する機会は沢山あるのではないでしょうか？

以上、今回のウェブラボ技術メモでした。