728x90
반응형
필요한 js파일 다운로드합니다.
- jspdf : html, 이미지, canvas 객체를 pdf로 변환해주는 라이브러리
- html2canvas : html 객체를 canvas로 변환해주는 라이브러리
jspdf.min.js
0.29MB
html2canvas.js
0.36MB
<html>
<head>
<script src="./js/jquery.min.js"></script>
<script src="./js/jspdf.min.js"></script>
<script src="./js/html2canvas.js"></script>
</head>
<div id="pdfDiv">
<!-- pdf 생성 영역 부분 -->
</div>
<button id="savePdfBtn">pdf다운로드</button>
<script>
$('#savePdfBtn').click(function() {
html2canvas($('#pdfDiv')[0]).then(function(canvas) {
// 캔버스를 이미지로 변환
let imgData = canvas.toDataURL('image/png');
let margin = 10; // 출력 페이지 여백설정
let imgWidth = 210 - (10 * 2); // 이미지 가로 길이(mm) A4 기준
let pageHeight = imgWidth * 1.414; // 출력 페이지 세로 길이 계산 A4 기준
let imgHeight = canvas.height * imgWidth / canvas.width;
let heightLeft = imgHeight;
let doc = new jsPDF('p', 'mm');
let position = margin;
// 첫 페이지 출력
doc.addImage(imgData, 'PNG', margin, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
// 한 페이지 이상일 경우 루프 돌면서 출력
while (heightLeft >= 20) {
position = heightLeft - imgHeight;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
doc.addPage();
heightLeft -= pageHeight;
}
// 파일 저장
doc.save('sample.pdf');
});
});
</script>
</html>
[Reference]
728x90
반응형
'front-end > script' 카테고리의 다른 글
| [javascript] 부모창과 자식창의 값 전달 window.opener (0) | 2021.07.15 |
|---|---|
| [jQuery] input에 숫자만 입력하기 (0) | 2021.03.23 |
| [javascript] 이미지 용량 줄이기 (이미지 리사이징) Compressor.js (0) | 2020.11.13 |
| JSP에서 URL encode 하는 방법 (특수문자 UTF-8 인코딩) (0) | 2020.11.10 |
| [javascript] JSON 합치기 Object.assign(a, b) (0) | 2020.10.09 |
댓글