이런 장면에서 사용할 수 있습니다.

예를 들어, 사용자에게 설문 조사에 응답하는 사이트
사용자가 자신의 답변 결과 부분만을 인쇄하고 싶은 경우 등에 사용할 수 있습니다.
보통의 인쇄에서는 불필요한 부분도 들어오므로, 필요한 에리어만을 인쇄할 수 있도록 합니다.
※실제의 거동을 확인할 수 있는 web어플의 URL을 맨 아래에 올리고 있으므로, 그쪽도 확인해 주세요.

구현 흐름

　1:인쇄 버튼을 작성
2:프린트하고 싶은 에리어의 취득의 지정
3:2의 영역 전체의 카피를 작성
4:3 이외를 비표시로 하는 처리를 작성
5:인쇄 다이얼로그의 호출➡︎인쇄한다
6:3에서 작성한 인쇄용 영역을 삭제 ・4로 비표시로 한 요소를 표시한다

구현 시작

1：인쇄 버튼을 작성

print.html

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

2：프린트하고 싶은 에리어의 취득

프린트하고 싶은 범위를 이하의 「div 태그」로 둘러싼다.

print.html

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

3:2의 영역 전체의 카피를 작성

1:프린트하고 싶은 범위를 취득
2:프린트용의 요소 「#print」를 작성.
3:2의 자식 요소에 1을 넣는다.

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');

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

 });
});

4:3 이외를 비표시로 하는 처리를 작성

print.js

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

print.css

.print-off {
　display: none;
}

5：인쇄 다이얼로그의 호출➡︎인쇄한다

print.js

window.print();

6：3에서 작성한 인쇄용 에리어를 삭제 ・4로 비표시로 한 요소를 표시해 종료입니다.

print.js

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

끝에.

어떻습니까?
인쇄하고 싶은 에리어만을 꺼낼 수 있기 때문에 유저에게 있어서 불필요한 에리어가 없어져 사용하기 편리한 페이지를 작성할 수 있다고 생각합니다.
자작의 가정용 비축을 체크할 수 있는 앱에서도, 체크한 비축 정보를 인쇄할 수 있도록 하고 있기 때문에
좋으면 작업 사이에 그쪽을 봐 주시면 구체적인 거동을 확인하실 수 있습니다.
htps : // 벚꽃 2s와 ck ぇ ck. 어리석은 p. 코m/

그럼 끝까지 봐 주셔서 감사합니다!