Print 기능 구현 방법 (영역인쇄, javascript)

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding

 

인쇄할 버튼을 만들고 버튼을 클릭하면 인쇄가 되도록 구현하였다.

#첫번째시도

window.print() => header 부분을 비롯하여 모바일에서 설정된 영역까지 인쇄된다. 문제가 심각하다. 영역을 설정해서 인쇄하는 방법을 찾기 시작했다.

#두번째시도

0. document.body를 따로 저장해둔다.

1. 인쇄할 영역을 querySelector로 잡는다.

2. 인쇄하지 않을 영역을 querySelector로 잡는다.

3. 인쇄하지 않을 영역을 display = "none" 처리한다.

4. 인쇄할 영역을 document.body로 저장한다.

5. 인쇄한다.

6. 인쇄하고나서 인쇄하지 않았던 영역을 display = "block" 처리한다.

7. document.body를 다시 원상 복구한다.

8. 끝

이하 코드 전문

// Print Report
function info_print() {
  let initBody = document.body;
  let hiddenBtn = document.querySelector('.print-button'); 
  let hiddenHeader = document.querySelector('#header');
  let hiddenNavbar = document.querySelector('.navbar-device');
  let hiddenClearfix = document.querySelector('.clearfix');
 
  window.onbeforeprint = function () {
    hiddenBtn.style.display = "none";
    hiddenHeader.style.display = "none";
    hiddenNavbar.style.display = "none";
    hiddenClearfix.style.display = "none";
    document.body = document.querySelector('.main-container');
  }
  window.onafterprint = function () {
    hiddenBtn.style.display = "block";
    hiddenHeader.style.display = "block";
    hiddenNavbar.style.display = "block";
    hiddenClearfix.style.display = "block";
    document.body = initBody;
  }
  window.print();
}