Webサイトで印刷用CSSを使わずに特定の範囲のみを印刷する方法ごご紹介します。
プラグイン「printThis」を紹介します。
本来なら特定の範囲のみを印刷するには、その印刷箇所に応じたCSSを用意する必要があり、しかも、印刷したい箇所が同一ページ内に複数ある場合にはなかなか面倒なことになってきます。
しかし、このプラグインを使えば、そのような手間を掛けることなく指定した範囲、要素で印刷できるようになります。
・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=”img/img01.jpg”></p> 印刷したい箇所
<p class=”print_btn01″><a>この画像を印刷する</a></p> 印刷ボタン
これだけで実現できてしまいます！
