html 화면을 PDF로 출력하기

구글에 검색해보면 jspdf 와 html2canvas 를 이용한 pdf출력법이 많고 나도 이걸 사용하고 있었지만

 

이걸 사용하면 page-break-before 를 사용한 페이지 나누기 같은 기능들을 사용할 수 없다

 

이 모든것은 html2pdf 한방으로 끝난다

 

https://github.com/eKoopmans/html2pdf.js

GitHub - eKoopmans/html2pdf.js: Client-side HTML-to-PDF rendering using pure JS.

 

 

기존에 jspdf 와 html2canvas 를 연동하여 사용한 코드

window.jsPDF = window.jspdf.jsPDF // jspdf 사용시 선언후 사용해야함
  	
    var ctx = canvas.getContext('2d');
    ctx.webkitImageSmoothingEnabled = true;
    ctx.mozImageSmoothingEnabled = true;
    ctx.imageSmoothingEnabled = true;
	  
   	var imgData = canvas.toDataURL('image/png', 1.0);
   	
   	var doc = new jsPDF({
   		format: "a4",
   		unit	: "mm",
   		orientation: "p"
   	});
   	
   	var margin = 10; // 출력 페이지 여백설정
    var imgWidth = 195; 
    var pageHeight = 295;  

    var imgHeight = canvas.height * imgWidth / canvas.width;
    var heightLeft = imgHeight;
    var position = margin;

    doc.addImage(imgData, 'JPEG', margin, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;

    while (heightLeft >= 0) {
      position = heightLeft - imgHeight;
      doc.addPage();
      doc.addImage(imgData, 'JPEG', margin, position + 10, imgWidth, imgHeight);
      heightLeft -= pageHeight;
    }
        
    doc.save();

 

위의 코드가 아래의 코드 2줄로 화면 출력과 page-break-before 문제점이 다 해결된다

var element = document.getElementById('element-to-print');
html2pdf(element);

 

실행흐름은 아래와 같음

.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()

 

728x90

 

JSFiddle 로 만들어본 예제

https://jsfiddle.net/tsmkqzd1/9/

Edit fiddle - JSFiddle - Code Playground