개발이야기

Javascript로 화면 PDF로 저장

1. 필요한 js파일 다운로드

• html2canvas : html 객체를 canvas로 변환해주는 라이브러리
• jspdf : html, 이미지, canvas 객체를 pdf로 변환해주는 라이브러리

2. 사용되는 jsp 파일에 추가

<script src="/js/html2canvas.js"></script>
<script src="/js/jspdf.min.js"></script>

3. javascript 

<script>
$(document).ready(function() {
	$('#savePdf').click(function() { // pdf저장 button id
		
	    html2canvas($('#pdfDiv')[0]).then(function(canvas) { //저장 영역 div id
		
	    // 캔버스를 이미지로 변환
	    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) {
	        position = heightLeft - imgHeight;
	        doc.addPage();
	        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
	        heightLeft -= pageHeight;
	    }
	 
	    // 파일 저장
	    doc.save('file-name.pdf');

		  
	});

	});
	
	
})



</script>

• A4 이미지 가로길이: 210mm 
• A4 출력여백(margin) : 20mm (좌우:10+10)
• imgWidth : 210 - 20 = 190mm
• 아래 그림(6) 참조

4. html

<button type="button" class="btn btn-primary" id="savePdf" >PDF 저장</button>

<div id="pdfDiv">
    (PDF 저장 내용)...
</div>

5. 실행

6. PDF 파일