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

こんにちは。

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

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

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

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

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

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

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

・GitHub

https://github.com/jasonday/printThis

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

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

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

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

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

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

作成したDEMOはこちら

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

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

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