特定エリアのみをプリントしたい

特定範囲のみをプリントできるようにしたい、という依頼がありましたので調べてみました。

▼サンプル
「個別印刷」ボタンをクリックすると、クリックしたエリアをプリント。
「一括印刷」ボタンをクリックするとareaA、areaBの両方をプリントします。

See the Pen print by miya (@tam_miya) on CodePen.

■JavaScript
※jQueryを使用しています。

$(function(){

    //個別印刷ボタンをクリックした時
   $('.print-btn').on('click', function(){
     //プリントしたいエリアの取得
     var printPage = $(this).closest('.print-page').html();

        //プリント用の要素「#print」を作成
       $('body').append('<div id="print"></div>');
       $('#print').append(printPage);

        //「#print」以外の要素に非表示用のclass「print-off」を指定
        $('body > :not(#print)').addClass('print-off');
      window.print();

     //window.print()の実行後、作成した「#print」と、非表示用のclass「print-off」を削除
     $('#print').remove();
     $('.print-off').removeClass('print-off');
   });

 //一括印刷ボタンをクリックした時
   $('.print-all').on('click', function(){
     window.print();
 });

});

プリントしたいエリアのみのHTMLをJavaScriptで作成し、プリント実行後に元に戻しています。
処理自体は単純ですが、とても勉強になりました！

■参考サイト
【jQuery】指定した個所のみ印刷する | 忘却の彼方 | 560Days

以下のようなプラグインを使用する方法もあるようですので、参考にどうぞ。
指定範囲を簡単に印刷するjQueryプラグイン jPrintArea.js が便利な件
印刷画面不要！指定範囲のみ印刷できるjQueryプラグイン「jPrintArea.js」