単純に、任意のボタンを押したらページ印刷用のダイアログを立ち上げるだけであれば、htmlに次のように書けば実装することができます。

See the Pen btn-print by Yurie (@kkrg) on CodePen.

<a href="#" onclick="window.print(); return false;">印刷する</a>

範囲を指定する場合は、printThis.jsを使用します。

See the Pen printThis by Yurie (@kkrg) on CodePen.

実装方法

任意のボタンを押すまでは同じですが、ページ全体を印刷するのではなく、特定の場所を印刷できるようにします。

今回は、3つのボタンを用意して、それぞれのボタンを押した時に個別の写真を印刷できるようにしたかったので、次のように組みました。

<div class="print01">
    <h3 class="ttl">print01</h3>
    <img src=“任意のディレクトリ/img/print01.jpg">
</div><!-- /.print01 -->
<a class="print-btn print-btn01">print01</a>
<div class="print02">
    <h3 class="ttl">print02</h3>
    <img src="任意のディレクトリ/img/print02.jpg">
</div><!-- /.print02 -->
<a class="print-btn print-btn02">print02</a>
<div class="print03">
    <h3 class="ttl">print03</h3>
    <img src="任意のディレクトリ/img/print03.jpg">
</div><!-- /.print03 -->
<a class="print-btn print-btn03">print03</a>

次はjQueryを設定していきます。

jQuery本体の他に、今回のメインとなる印刷範囲を認識してくれるプラグインprintThis.jsを用意します。

上記からダウンロードして任意の場所に格納後、html内の任意の場所、jQuery本体のあとにprintThis.jsを設置します。

「印刷ボタン（.print-btnXX）」と今回はdivで囲った「印刷範囲を囲んだ要素（.printXX）」がそれぞれペアになるように、任意のクラスを割り当てていきます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src=“任意のディレクトリ/printThis.js"></script>
<script>
$(function() {
    $(".print-btn01").click(function(){
        $(".print01").printThis();
    });
    $(".print-btn02").click(function(){
        $(".print02").printThis();
    });
    $(".print-btn03").click(function(){
        $(".print03").printThis();
    });
});
</script>

ボタンを押したら指定した印刷範囲で印刷してくれるようになりました。