웹 페이지를 pdf 파일로 저장

보고 있는 웹 페이지를 pdf 파일로 저장하기 위해서

 

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

html2canvas : html 객체를 canvas로 변환해주는 라이브러리

 

가 필요하다.

 

해당 라이브러리를 사용하기 위해 아래 코드를 삽입한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.7.2/bluebird.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

 

페이지 로드하자마자 pdf 파일로 저장하는 코드를 삽입한다.

 

<script language="javascript">

	window.onload = function() {
	
		export_to_pdf();

	}

function export_to_pdf() {
	

	html2canvas(document.body, {
		useCORS: true,
		onrendered: function(canvas) {
			var img =canvas.toDataURL("image/jpeg,1.0");
			var pdf = new jsPDF();
			//var width = pdf.internal.pageSize.getWidth();
			//var height = pdf.internal.pageSize.getHeight();
           
           /*
            var pdf=new jsPDF("p", "mm", "a4");
            var width = pdf.internal.pageSize.getWidth();    
            var height = pdf.internal.pageSize.getHeight();
            pdf.addImage(canvas, 'JPEG', 0, 0,width,height);
            pdf.save('test11.pdf');
           */   

			pdf.addImage(img, 'JPEG', 0, 0); 
			pdf.save('filename.pdf');
		}
	});
}

</script>

 

[참조]

 

http://blog.naver.com/PostView.nhn?blogId=onandme&logNo=221487425335&parentCategoryNo=&categoryNo=33&viewDate=&isShowPopularPosts=false&from=postView

[Js Library] Html 을 Image로 렌더링! (html2canvas)

[자바스크립트] html 화면을 pdf로 내보내기 (jspdf, html2canvas 사용)|작성자 Mosball

Mosball은 푸릇푸릇하다 : 네이버 블로그

https://uxicode.tistory.com/entry/html2canvasjs%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%ED%99%94%EB%A9%B4-%EC%BA%A1%EC%B3%90

html2canvas.js를 이용한 화면 캡쳐

https://itinerant.tistory.com/51

[JavaScript] html2canvas 사용 방법