PDF 변환 출력

HTML문서를 PDF로 다운로드 할 수 있는 방법에 대해 알아보았다.

필요라이브러리

• html2canvas.js
• jsPDF.js

방법

1. html2canvas.js를 이용해 현재 화면을 canvas 이미지로 추출
2. jsPDF.js를 이용해 추출한 canvas 이미지를 PDF로 저장

소스

 html2canvas($('.print-box')[0]).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 position = 0;

   // pdf 파일 생성
   var doc = new jsPDF('p', 'mm');

   // 첫 페이지 출력
   doc.addImage(imgData, 'PNG', margin, 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('file-name.pdf');
   
})

이렇게 우회하여 PDF파일을 저장 할 수 있다.
하지만 여기서 문제가 발생한다.
바로 IE 이다.

html2canvas는 promise 를 사용하기 때문에 프로미스를 지원하지 않는 인터넷 익스플로러에서는 사용할 수 없다.

그래서 폴리필(polyfill)이란걸 사용해야하는데
그 의미는 여기서(클릭) 찾아보도록 하자.

이를 해결하기 위한 폴리필은 ie에서 promise를 사용하게 해주는 라이브러리이다.

• es6-promise.auto.js

해당 라이브러리를 sciprt 맨 아래 추가하면 ie에서도 크롬과 같이 작동하는걸 확인할 수 있다.

link : http://pub.ziten.co.kr/pub_hong/moduls/function/pdf_download/pdf_download.jsp