코린이의 기록

[javascript] HTML를 pdf로 변환하기 / how to render html to pdf 본문

javascript,HTML,CSS

[javascript] HTML를 pdf로 변환하기 / how to render html to pdf

코린이예요 2020. 2. 20. 18:28
반응형

HTML

  • Prerequisites
<body
    <!-- your code goes here -->
	<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
	<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
</body

- html2canvas.min.js : 현재 화면을 canvas이미지로 추출한다.

- jspdf.min.js : canvas 이미지를 PDF로 저장한다.

js 

html2canvas($('#your_html')[0]).then(function (canvas) {
var filename = 'FILENAME_' + Date.now() + '.pdf';
var doc = new jsPDF('p', 'mm', 'a4');
var imgData = canvas.toDataURL('image/png');
doc.addImage(imgData, 'PNG', 0, 0);
doc.save(filename);
});

- line 1: 렌더링할 element와 option을 설정한다. (html2canvas(element, options)) * option에 대한설명은 링크 참조

(여기서 elemnts를 array처럼 가져왔는데 이는 $('#your_html').get(0)과 같은 의미임.) 

- line 3:  jsPDF(orientation, unit, format, compress) : jspdf 객체를 생성한다.

  • orientation - The default value for orientation is "portrait". We can set it to "landscape" if we want a different page orientation.
  • unit - We can tell jsPDF in which units we want to work. Use one of the following: "pt" (points), "mm" (default), "cm", "in".
  • format - It's default page format. It can be "a3", "a4" (default), "a5", "letter", "legal".

- line 4 : canvas.toDataURL('image/png') : 캔버스를 이미지로 변환한다. 

- line 5 : 이미지를 pdf로 생성한다. 

 

 

Reference

HTML2CANVAS doc : https://html2canvas.hertzen.com/documentation

jsPDF doc : https://developer.tizen.org/community/tip-tech/creating-pdf-documents-jspdf?langredirect=1

반응형
저작자표시 비영리 동일조건

'javascript,HTML,CSS' 카테고리의 다른 글

[javascript] HTMS2Canvas를 이용하여 multiple-page PDF 만드는 방법  (1) 2020.02.20
웹 페이지 성능 속도를 높이기 위한 몇가지  (0) 2020.02.07
[chart.js] Config example  (0) 2019.11.13
[js] ajax 호출 후 순서 섞이는것 해결하기 (동기식 처리)  (0) 2019.09.09
[jquery] "click" event 중복 호출  (0) 2019.08.02
'javascript,HTML,CSS' Related Articles more
Comments