[JQuery] HTML PDF 변환 / HTML PDF 저장 ( html2canvas, jspdf)

■ JQuery HTML PDF 변환 / HTML PDF 저장 ( html2canvas, jspdf)

---

■ 라이브러리 파일 추가

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

---

■ 사용법

<div id="pdfArea">
	<span>make PDF</span>
</div>
<button type="button" onclick="savePDF()">PDF 다운</button>

<script type="text/javascript">
  function savePDF(){
    //저장 영역 div id
    html2canvas($('#pdfArea')[0] ,{	
      //logging : true,		// 디버그 목적 로그
      //proxy: "html2canvasproxy.php",
      allowTaint : true,	// cross-origin allow 
      useCORS: true,		// CORS 사용한 서버로부터 이미지 로드할 것인지 여부
      scale : 2			// 기본 96dpi에서 해상도를 두 배로 증가
      
    }).then(function(canvas) {	
      // 캔버스를 이미지로 변환
      var imgData = canvas.toDataURL('image/png');

      var imgWidth = 190; // 이미지 가로 길이(mm) / A4 기준 210mm
      var pageHeight = imgWidth * 1.414;  // 출력 페이지 세로 길이 계산 A4 기준
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;
      var margin = 10; // 출력 페이지 여백설정
      var doc = new jsPDF('p', 'mm');
      var position = 0;

      // 첫 페이지 출력
      doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      // 한 페이지 이상일 경우 루프 돌면서 출력
      while (heightLeft >= 20) {			// 35
      position = heightLeft - imgHeight;
      position = position - 20 ;		// -25

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

      // 파일 저장
      doc.save('filename.pdf');
    });
  }
</script>

---

■ 참고

<script type="text/javascript">
  // Javascript일 경우
  html2canvas(document.getElementById("pdfArea")).then(function(canvas) {
  });

  // JQuery일 경우
  html2canvas($("#pdfArea")[0]).then(function(canvas) {
  });
</script>

---

■ 외부이미지

프린트 영역 내 이미지 경로가 외부 경로(외부 이미지)일 경우 이미지 영역이 빈화면으로 노출됨 (내부경로는 정상적으로 노출)

외부 경로일 경우 프록시(proxy)를 사용하여야 함

• html2canvas-php-proxy

 

brcontainer/html2canvas-php-proxy