IT

Webサイトで印刷用CSSを使わずに特定の範囲のみを印刷する

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> 印刷ボタン

これだけで実現できてしまいます!

お問い合わせフォーム

気になる方はコチラからお問い合わせ!
必須お名前
必須メールアドレス
必須郵便番号
必須ご住所
必須電話番号
ご相談内容
必須メッセージ本文

コメントを残す

*