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

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

【ブラウザの印刷機能を使う２】　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内の情報のみ）を印刷することができました。