[javascript] HTMS2Canvas를 이용하여 multiple-page PDF 만드는 방법

 

html로 만든 table을 HTMS2Canvas를 이용하여 pdf파일로 만드는 과정에서, 화면이 길어져 pdf가 잘리는 문제가 발생하였다. 

왼쪽사진은 pdf가 잘림 / 오른쪽은 전체 테이블이 출력됨

 

 

 

 

Before

html2canvas($('#dialog-view-report #monthly_report')[0]).then(function (canvas) {
			var filename = 'OTA-REPORT_' + Date.now() + '.pdf';
			var doc = new jsPDF('p', 'mm', 'a4'); 
			var imgData = canvas.toDataURL('image/png'); 
			doc.addImage(imgData, 'PNG', 0, 0); 
			doc.save(filename);
});

After

html2canvas($('#dialog-view-report #monthly_report')[0]).then(function (canvas) {
			var filename = 'OTA-REPORT_' + Date.now() + '.pdf';
			var doc = new jsPDF('p', 'mm', 'a4'); 
			var imgData = canvas.toDataURL('image/png');
			var imgWidth = 210;
			var pageHeight = 295;
			var imgHeight = canvas.height * imgWidth / canvas.width;
			var heightLeft = imgHeight;
			var position = 0;
			doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight); 
			heightLeft -= pageHeight;
			while (heightLeft >= 0) {
				position = heightLeft - imgHeight;
				doc.addPage();
				doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
				heightLeft -= pageHeight;
			  }
			doc.save(filename); 
		});

 

 

Reference :

https://stackoverflow.com/questions/27045704/how-do-i-get-a-multi-page-pdf-from-a-website-using-jspdf-and-html2canvas/38788909#38788909

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

http://blog.naver.com/PostView.nhn?blogId=rnjsrldnd123&logNo=221526274628&parentCategoryNo=20&categoryNo=&viewDate=&isShowPopularPosts=true&from=search