【jQuery】指定した個所のみ印刷する

電脳備忘録

クーポン印刷ボタンを押したとき、クーポン内容以外は表示しないように対応したときの覚書。
要するに指定した個所のみ印刷したかったわけです。
jquery.jPrintArea.jsというライブラリがIEだと軒並みエラーをはきまくったのでまぁ仕方なしではありましたが、よい勉強になりましたね。
というかちゃんと動作確認したのかしら・・・。

【ブラウザの印刷機能を使う2】 jsで印刷範囲の指定 - 屁民新報+

htmlはこんな感じ

<div id="content">
<h1>お得なクーポンをゲット</h1>
<div id="coupon-area">
<!-- クーポンの内容(画像とか) -->
</div><!-- /#coupon-area -->
<p id="btn_get_coupon"><a href="#"><img src="/img/btn_coupon.gif" alt="クーポン印刷ボタン" width="150" height="30" /></a></p>
</div><!--/#content-->

非表示用のクラスを用意

.off {
display: none;
}

下記のようなjQueryを書きました。jQueryのバージョンは1.3.2です。古いですね・・・。

<script type="text/javascript">
$(function(){
$('#btn_get_coupon a[href=#]').click(function(e){
e.preventDefault(); //リンクとして動作させない
var data = $("#coupon-area").html(); //#coupon-areaの内容を変数dataに格納
$("#content").after('<div id="print-coupon"></div>'); //#contentの後に#print-couponを追加
$("#print-coupon").append(data); //追加した#print-coupon内に変数dataの内容を格納
$("body *:not(#print-coupon,#print-coupon *)").addClass("off"); //body以下の#print-coupon以外の要素にoffクラスを追加(#print-coupon以外非表示となる)
window.print(); //印刷を実行
$("#print-coupon").remove(); //追加した要素#print-couponを削除
$(".off").removeClass("off"); //追加したクラスoffを削除
});
});
</script>

これでIEやほかのブラウザでエラーはくことなく意図したもの(#print-coupon内の情報のみ)を印刷することができました。

広告

ブログの維持費に充てるでございます・・・。