Javascript PDF다운로드

jsp 페이지에서 PDF다운로드 기능을 구현한다.

보통 pdf 다운로드의 경우, front단에서 구현한다고 한다.

나는 서버단에서 구현해줘야 하나 싶었다.

 

pdf 다운로드는 PDF.js를 사용,

https://mozilla.github.io/pdf.js/

여기서 사용법을 확인하면 좋을것 같다.

<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jspdf.min.js" rel="stylesheet"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/html2canvas.js" rel="stylesheet"></script>

다운로드를 받고, 두개의 스크립트 파일을 추가해준다.

사실 jspdf.min.js만 추가해줘도 충분히 사용할 수 있으나..

한글지원이 안되므로 한글을 다 깨뜨리더라.

깃허브 가니까 사용자들이 utf-8을 지원할 생각이 없냐는 질문에 그럴 생각 없다는 답변을 보고 나서

검색했다ㅠ_ㅠ

 

var doc = new jsPDF();
var pdfHandlers = {
	'#editor' : function (element, renderer) {
	return true;
	}	
};
$("#pdfDownload").click(function () {
		$("#usr-state").hide();
		$("#p-dept").css("width","40%");
		$("#usr-nm").css("width","38.7%");
		html2canvas(document.getElementById("pdfContents"), {
			 onrendered : function(canvas){
			  var imgData = canvas.toDataURL('image/png');
			  var doc = new jsPDF('p','mm',[297,210]);
			  doc.addImage(imgData, 'PNG', 10,10,190,95);
			  doc.save('개인지출내역서.pdf');
			  	} 
			});
		
	});

 

html2canvas는 html을 canvas로 변환해서 다운로드 해주는 라이브러리.

https://html2canvas.hertzen.com/

내가 설정한 <div>영역을 canvas로 뜨고, 그걸 pdf로 다운로드한다.

나는 지출내역서를 다운로드 하는 기능이라서, 단순하게 구현하기에는 두개의 라이브러리를 잘 사용하면 될 것같다.

 

pdf를 다시 그리거나, 좀 더 정밀하게 사용해야 한다면

pdfmake라는 라이브러리로 하나하나 그려주는것도 좋을 것 같다.

http://pdfmake.org/index.html#/ 

 

 

 

 

다운로드 한 pdf 이미지