miya
特定エリアのみをプリントしたい
特定範囲のみをプリントできるようにしたい、という依頼がありましたので調べてみました。
▼サンプル
「個別印刷」ボタンをクリックすると、クリックしたエリアをプリント。
「一括印刷」ボタンをクリックすると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」