javascript - HTML 화면을 PDF로 출력

프로젝트에서 화면(html)을 PDF로 출력해야하는 경우가 생겼다. iText 라이브러리의 경우 html을 pdf로 변환해주지만 CSS 적용에 한계가 있어서(매우 제한적이다) 결국 이미지로 변환을 거쳐 PDF로 출력하는 방법을 선택했다. 사용한 라이브러리는 아래 3가지이다.

bluebird.min.js (3.5.0)

bluebird.js: 아래 라이브러리에서 사용하는 Promise 함수를 IE에서도 사용할 수 있게 해준다.
http://bluebirdjs.com/docs/getting-started.html

html2canvas.min.js (0.5.0-beta3)

html2canvas.js: 현재 브라우저에 의해 렌더링된 화면을 canvas로 변환해준다.
https://html2canvas.hertzen.com/

jspdf.min.js (1.3.5)

jspdf.js: 객체를 PDF로 변환해준다.
https://github.com/MrRio/jsPDF

[예제 코드]

<p>// 현재 document.body의 html을 A4 크기에 맞춰 PDF로 변환
html2canvas(document.body, {
  onrendered: function(canvas) {
 
    // 캔버스를 이미지로 변환
    var imgData = canvas.toDataURL('image/png');
     
    var imgWidth = 210; // 이미지 가로 길이(mm) A4 기준
    var pageHeight = imgWidth * 1.414;  // 출력 페이지 세로 길이 계산 A4 기준
    var imgHeight = canvas.height * imgWidth / canvas.width;
    var heightLeft = imgHeight;
     
        var doc = new jsPDF('p', 'mm');
        var position = 0;
         
        // 첫 페이지 출력
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
         
        // 한 페이지 이상일 경우 루프 돌면서 출력
        while (heightLeft >= 20) {
          position = heightLeft - imgHeight;
          doc.addPage();
          doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
          heightLeft -= pageHeight;
        }
 
        // 파일 저장
        doc.save('sample_A4.pdf');
  }
});</p>

[기타 사항]

- 화면의 일부분을 깔끔하게 출력하기 위해 window.open('', '', 'width=800,height=1100'); 함수로 새 창에 띄운 후 위 자바스크립트를 실행시킴

- 아직 개발컴퓨터에서만 테스트한 상태. 다른 컴퓨터에서는 화면 크기에 따라 문제가 발생할 수도 있음

HTML 화면을 PDF로 출력

단축키

Articles