[JavaScript] window.print() 지정 영역, 원하는 영역 출력하기

자바스크립트에서는 프린터로 출력하는 함수 window.print()를 제공한다. 

단, 이 함수는 웹페이지 전체 영역이 출력되는 함수이기때문에 필요한 영역만 지정해야할 필요가 있다.

 

원하는 영역 프린트를 제어하기 위한 이벤트 핸들러는 두 종류가 있다.

window.onbeforeprint 와 window.onafterprint

 

영역을 지정하여 출력하기

이벤트 핸들러를 추가하여 영역을 지정해보자.

window.onbeforeprint 와 window.onafterprint에 콜백함수를 지정한다.

• window.onbeforeprint
  • 프린트 출력 이전 이벤트 발생
  • 미리보기 시에 콜백함수 실행

• window.onafterprint
  • 프린트 출력 이후 이벤트 발생
  • 미리보기 취소 또는 프린트 완료 후에 실행

 

아래는 간단한 예시이다.

여기서 눈여겨 볼 부분은 initBody변수를 선언한 지점인데,

body 전체를 초기화 변수로 받아두었다가 다시 body에 프린트 실행 이전을 넣어주어야 한다.

 

아무래도 인쇄를 할 때는 인쇄하기 버튼이나 css등은 사용자가 출력할 필요가 없을 수 있기에,

각자 상황에 맞게 display 설정을 바꿔주어야 한다.

 

그리고 인쇄가 끝난 후에는 원래대로 페이지를 돌려놓아야 하기 때문에,

initBody 변수를 선언해주었다. 

let initBody = document.body;

let hiddenBtn = document.querySelector('.btns.icon'); 
let hiddenHeader = document.querySelector('#header');
let hiddenCopyright = document.querySelector('#footer');
let hiddenBtnTop = document.querySelector('.btn-top');

window.onbeforeprint = function () {
    hiddenBtn.style.display = "none";
    hiddenHeader.style.display = "none";
    hiddenCopyright.style.display = "none";
    hiddenBtnTop.style.display = "none"
    $('.imgMap-items').css('display', 'none');

    document.body = document.querySelector('#container');
}

window.onafterprint = function () {
    hiddenBtn.style.display = "inline-flex";
    hiddenHeader.style.display = "block";
    hiddenCopyright.style.display = "block";
    hiddenBtnTop.style.display = "block";
    $('.imgMap-items').css('display', 'block');

    document.body = initBody;
} 

window.print();