指定したエリアだけを印刷する処理

こんな場面で使えます。

　例えば、ユーザーに何らかのアンケートに回答をしてもらうサイトで
ユーザーが自分の回答結果の部分だけを印刷したい場合などに使えます。
普通の印刷では余計な箇所も入ってくるので、必要なエリアだけを印刷できるようにします。
※実際の挙動が確認できるwebアプリのURLを一番下に載せてますので、そちらもご確認ください。

実装の流れ

　１：印刷ボタンを作成
　２：プリントしたいエリアの取得の指定
　３：２のエリア全体のコピーを作成
　４：3以外を非表示にする処理を作成
　５：印刷ダイアログの呼び出し➡︎印刷する
　６：３で作成した印刷用エリアを削除 ・ ４で非表示にした要素を表示する

実装スタート

１：印刷ボタンを作成

print.html

<button class="print-btn">
　<span>結果だけを印刷する</span>
</button>

２：プリントしたいエリアの取得

　プリントしたい範囲を以下の「divタグ」で囲む。

print.html

<div class="print-area">
　<!--　この中に要素を入れる。印刷しないものは、後で非表示にする処理で消します。 -->
</div>

3：２のエリア全体のコピーを作成

　１：プリントしたい範囲を取得
　２：プリント用の要素「#print」を作成。
　３：２の子要素に１を入れる。

print.js

$(function(){
//印刷ボタンをクリックした時の処理
$('.print-btn').on('click', function(){

//プリントしたいエリアの取得
var printArea = document.getElementsByClassName("print-area");
 
//プリント用の要素「#print」を作成し、上で取得したprintAreaをその子要素に入れる。
$('body').append('<div id="print" class="printBc"></div>');
$(printArea).clone().appendTo('#print');

//この下に、以降の処理が入ります。

 });
});

４：3以外を非表示にする処理を作成

print.js

//プリントしたいエリア意外に、非表示のcssが付与されたclassを追加
$('body > :not(#print)').addClass('print-off');

print.css

.print-off {
　display: none;
}

５：印刷ダイアログの呼び出し➡︎印刷する

print.js

window.print();

６：３で作成した印刷用エリアを削除 ・ ４で非表示にした要素を表示して終了です。

print.js

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

終わりに。

いかがでしょうか。
印刷したいエリアだけを取り出せるのでユーザーにとって不要なエリアが無くなり使い勝手の良いページが作成できると思います。
自作の家庭用備蓄をチェックできるアプリでも、チェックした備蓄情報を印刷できるようにしてありますので
良かったら作業の合間にそちらを見ていただけると具体的な挙動を確認していただけます。
https://saku2stockcheck.herokuapp.com/

では、最後まで見ていただいてありがとうございました！