JavaScript 브라우저 인쇄 기능 사용 시 Print 페이지 범위 설정 방법

<input class="btn btn_ok" type="button" value="인쇄" title="인쇄" style="cursor:pointer;" OnClick="printpage();">

인쇄 버튼을 만들고 

printpage() 함수를 이벤트 함수로 지정해준다. 

function printpage(){
	
	window.print();

}

함수는 간단하게 위와 같이 작성해준다. 

여기서 

그러면 인쇄 범위는 어떻게 설정해주는가 ?

스타일로 지정해주면된다.

<style>
@media print {
  /* 원하는 스타일 및 설정을 여기에 추가합니다 */
  .no-print {
    display: none; /* 이 클래스를 가진 요소는 인쇄에서 숨김 */
  }
  
  /* 인쇄할 내용의 스타일을 설정합니다 */
  .print-only {
    /* 인쇄할 내용의 스타일 지정 */
  }
}
</style>

<input class="btn btn_ok no-print" type="button" value="인쇄" title="인쇄" style="cursor:pointer;" OnClick="printpage();">
<div class="print-only">
  <!-- 인쇄에 포함시키고 싶은 내용을 여기에 추가합니다 -->
</div>

<script>
function printpage() {
  window.print();
}
</script>

 

흔히 css 파일을 사용하는데 

@media print {
  #header, .sVisual, .form-actions, .ftCopy, .location, .receipt_title { display:none }
  html, body {width: 210mm; height: 367mm;}
  .print_layout {margin: 0; border: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always;}
  .pli_foot {bottom: 110px;}
}

나는 이처럼 작성하여 적용해주었다.