웹페이지의 특정영역을 canvas이미지로 저장하고
PDF파일로 저장/캡쳐하는 자바스크립트 라이브러리입니다.
https://moonsiri.tistory.com/71
직접 html2canvas.js 와 jspdf.js 를 활용하여 웹페이지 PDF 파일 저장 소스를 구현한 예제가 있습니다.
아래 js파일을 활용하면 쉽게 구현할 수 있습니다.
https://github.com/eKoopmans/html2pdf.js
Client-side HTML-to-PDF rendering using pure JS.
html2pdf.js converts any webpage or element into a printable PDF entirely client-side using html2canvas and jsPDF.
* html2pdf.js v0.9.2
* Copyright (c) 2020 Erik Koopmans
* Released under the MIT License.
< js 파일 다운로드 >
html2pdf.bundle.js
https://raw.githubusercontent.com/eKoopmans/html2pdf.js/master/dist/html2pdf.bundle.js
번들패키지
<script src="es6-promise.auto.min.js"></script>
<script src="jspdf.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="html2pdf.min.js"></script>
< 테스트 >
- 크롬, IE edge
(구 IE10) 안됨
- 한글 가능
- 이미지 포함 가능
- 페이징 가능 (세로로 길어질 경우)
< 활용법 >
<script src="/inc/html2pdf.bundle.js"></script>
<button data-onclick="pdf_down()" class="btn_print">PDF 다운로드</button>
<script>
function pdf_down() {
// Get the element.
var element = document.getElementById('pdf_canvas');
// Generate the PDF.
html2pdf().from(element).set({
margin: 10,
filename: 'filename.pdf',
html2canvas: { scale: 1 },
jsPDF: {orientation: 'portrait', unit: 'mm', format: 'a4', compressPDF: true}
}).save();
}
</script>
<div id="pdf_canvas">
캡쳐영역
</div>
#html2pdf
#웹페이지pdf파일저장
#웹페이지캡쳐