特定の要素のみを印刷したい。そんな願いを叶える魔法のjQueryプラグインを発見しました。

その名も「printThis」。IEも7、8、9、10、11まで問題なく動き、使い方も簡単です。

printThisの使い方と対応ブラウザ

使い方は他のjQueryプラグイン同様、jQueryを読み込んでからprintThis.jsを読み込みます。あとはクリックイベントなどで実行させましょう。

以下はとあるクーポン画像のみを印刷する例です。クリックイベントを登録するボタン要素を用意しておいて、印刷したい要素にprintThis()を繋げて使います。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.printThis.js"></script>

<div id="print-coupon">クーポンを印刷する</div>

<p id="coupon-image"><img src="img/strongest_coupon.png" alt="何でも50%OFFになる最強のクーポン"></p>

<script>
$('#print-coupon').click(function(){
    $('#coupon-image').printThis();
});
</script>

これだけで特定の要素が印刷できるんです。もし画像印刷がIEで上手く動かない場合は画像のパス指定を絶対パスにしてみてください。

この他、オプション設定で印刷用にインラインCSSを指定したりできるようですが、GitHub本家のREADMEに書いてなかったので細かいことは省いておきます（まだ暫定的なオプションなのかもしれません）。どちらにせよオプションを使わなくてもこれだけで大体の状況に対応できるのではないでしょうか。

ちなみに「jPrintArea.js」というプラグインも見つかりますが、こちらはIEに対応してなかったり、動的に生成されたHTML要素をChromeで印刷出来なかったりと不具合が多かったので断念しました。このprintThis自体はjPrintArea.jsのコードをベースにしているようです。

対応ブラウザ

対応ブラウザについて。これは作者自身が言っているワケではなく私が調べた結果なのでご了承ください。

2015年12月22日現在調べた対応しているブラウザはこちらです。（スマホ、sleipnirはその時必要無かったので調べてません…）

残念ながら最近Microsoftが出した新鋭「Edge」では上手く動作しませんでした。

ただ、Edge専用にコードを書けば同じく特定の要素を印刷することは可能なので、ユーザーエージェントで処理を振り分けるのが良さそうです。Edgeでの方法も作成する機会ができそうなので方法が分かり次第追記したいと思います。

2015年12月22日追記：

上記バージョンのEdge（現在での最新版）でも問題なく印刷可能でした。最高のプラグインです！