html 특정 영역 window.print 시 마지막 공백 페이지 제거 하기

자꾸 프린트 할때 내용은 한장 이지만 공백 페이지가 붙어나와 2페이지로 인식 되는것 같다 그냥 둬도 되지만

시간도 남고 ㅎㅎ 이리저리 테스트 하다가 해결 해서 글을 남긴다.

중요한 부분은 style css 부분이다. 1장 기준이면 1장으로 표시, 2장 이상일 경우 해당 장수 만큼만 표시 된다.

<style type="text/css">
@media print {
    html, body {
      height:auto;
/*       width:auto; */
       margin: 0 !important; 
       padding: 0 !important; 
/*       overflow: hidden; */
    }

}
</style>

<div class="section" style="width: 88rem;" id="print_view">
    <h3 class="" style="margin: 1rem 0 0;font-size: 1.7rem;">주문내역 상세</h3>
    <a class="btn_comm" style=" position: absolute;left: 82.8rem;top: 0.5rem;border-radius:5px;" onclick="printBtnFn()">인쇄</a>
   .
   .
   .
</div>

<seript type="text/javascript">
//특정 영역만 인쇄
function printBtnFn(){
	$('.btn_comm').hide();//버튼 ui는 전부 숨겨버림.
	var initBody;
	window.onbeforeprint = function(){
    //임시 document에 프린트할 영역만 담는다.
		initBody = document.body.innerHTML;
		document.body.innerHTML = document.getElementById('print_view').innerHTML;
	};
	window.onafterprint = function(){//후린트 미리보기 화면을 닫을시 임시document 종료.
		document.body.innerHTML = initBody;
		$('.btn_comm').show();
	 };
	 window.print();
	 return false;	
};
</script>

 

728x90

반응형

SMALL

- 결과물: