jQuery:印刷ボタンと印刷の範囲設定を実装する – printThis.js
印刷のダイアログを立ち上げるボタンの設置と、任意の内容のみを印刷させたい場面があったのでその時に行ったことをメモ。
01. 印刷用ダイアログを立ち上げる
02. プラグインを使用して印刷の範囲を指定する
範囲を指定する場合は、printThis.js
を使用します。
See the Pen printThis by Yurie (@kkrg) on CodePen.
実装方法
任意のボタンを押すまでは同じですが、ページ全体を印刷するのではなく、特定の場所を印刷できるようにします。
今回は、3つのボタンを用意して、それぞれのボタンを押した時に個別の写真を印刷できるようにしたかったので、次のように組みました。
html
<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)」がそれぞれペアになるように、任意のクラスを割り当てていきます。
html
<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>
ボタンを押したら指定した印刷範囲で印刷してくれるようになりました。
URLをコピーする