[Javascript] 브라우저 출력 | pdf 다운로드 | window.print() | html to pdf

오늘은 script로 간편하게 pdf 다운로드 및 출력을 할 수 있는 window.print() 함수를 소개해보려고 한다.
pdf 보고서 출력같은 경우 서버단에서 별도의 모듈을 통해 가공해서 클라이언트에 던져주는 것이 일반적이다.

그러나 연산처리 등 별도의 가공 없이 화면 상의 정보만으로 간단하게 문서를 생성하고 싶은 경우, script 함수 단 한 줄만으로 브라우저에서 웹문서를 pdf 다운로드, 출력 할 수 있다.

브라우저에서 windows에서 ctrl + p 또는 mac에서 ⌘ + p를 눌렀을 때 뜨는 출력 모달을 띄우도록 제어해주는 것이다.

Chrome window.print() 실행화면

Edge window.print() 실행화면

익스에서는 테스트 안 해봤는데... 뭐... 22년 6월에 종료되니까...(그날이 어서 오길🙏)
사용법은 아주 간단하다!

window.onbeforeprint() : 프린트 실행 전에 실행되는 함수

 window.onbeforeprint = function () { 
      

            // 프린트 할 영역 필터링 
      

            $(".printBlock").css("display", "none"); 
      

            $(".printInlineBlock").css("display", "none"); 
      

            $(".printFloat").css("float", "left"); 
      

            $(".forumFooterArea").css("display", "none"); 
      

        }; 
      

          
      

여기에서 나는 header, footer 처럼 보고서에서 필요없는 부분을 display: none 처리 해주었다.
그 외에도 문서의 제목을 달아준다거나, 출력할 문서 서식 부분 컴포넌트를 hidden 시켜두었다가 여기에서 show 하는 등 화면 상에서의 가공을 수행하면 된다.

window.print() : 프린트 실행 함수

 function onclickPrint() { 
      

            window.print(); 
      

        } 
      

출력 버튼 클릭 이벤트로 해당 함수를 걸어주고,

window.onafterprint() : 프린트 실행 후 실행되는 함수

 window.onafterprint = function () { 
      

            // 초기 body 복구 
      

            $(".printBlock").css("display", "block"); 
      

            $(".printInlineBlock").css("display", "inline-block"); 
      

            $(".printFloat").css("float", "right"); 
      

            $(".forumFooterArea").css("display", "block"); 
      

        }; 
      

출력 모달을 닫은 후 실행되는 영역에는 아까전에 onbeforeprint 에서 숨김처리 했던 부분을 초기 상태로 복구해주었다.
함수명과는 다르게(?) 사용자가 실제 출력을 하지 않아도, 모달을 닫을 때 실행되는 콜백함수이기 때문에 안 먹힐 염려는 하지 않아도 좋다.

이렇게 아주 간단하게 웹문서로 pdf 다운로드를 구현해보았다.

참고한 글 : https://developer.mozilla.org/en-US/docs/Web/API/Window/print