[라이브러리] Canvas2Html 사용하기

 

모 필드에서 한 화면을 PDF 형식으로 저장하는 기능을 구현해야했다.

Canvas2Html은 그냥 코드를 가져다쓰고, 몇개의 옵션만 간단히 설정해주면 됐다.

 

---

 

📄 스크립트

// PDF로 저장버튼 클릭 시
$('.PDF').click(function() {
	html2canvas(document.body, {
		onrendered: function (canvas) {
				
			// 캔버스를 이미지로 변환
			var imgData = canvas.toDataURL('image/png');

			var imgWidth = 210; // 이미지 가로 길이(mm) A4 기준
			var pageHeight = imgWidth * 1.414;  // 출력 페이지 세로 길이 계산 A4 기준
			var imgHeight = canvas.height * imgWidth / canvas.width;
			var heightLeft = imgHeight;

			var doc = new jsPDF('p', 'mm');
			var position = 0;
				
			// 첫 페이지 출력
			doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
			heightLeft -= pageHeight;

			// 한 페이지 이상일 경우 루프 돌면서 출력
			while (heightLeft >= 20) {
				position = heightLeft - imgHeight;
				doc.addPage();
				doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
				heightLeft -= pageHeight;
			}

			// PDF로 저장하기
			// [다른 이름으로 저장] 창이 뜨며 defalut값으로 지정한 이름이 입력된다.
			doc.save('test.pdf');
		}
	});
});

 

---

 

 

한계

적용하는데에는 큰 어려움이 없었지만 몇 개의 한계가 있었다.

 

1. d3.js 미지원

다른 화면에는 차트가 없었기 때문에 괜찮았지만 딱 한 개의 화면에서 d3.js를 사용하여 차트를 구현하고있었는데

Canvas2Html로 PDF를 말면 차트가 나오지 않았다.

그 이유로 개발 거의 막판에 모든 차트를 Chart.js로 바꾸게 됐다.

2주 뒤에 철수하시는 퍼블리셔 분께 부탁드릴 때 얼마나 죄송했는지 모른다.

 

2. 이미지화

window에서 제공하는 인쇄창에서 [PDF로 저장]하는 기능이 있다.

Canvas2Html은 화면을 그대로 이미지로 만들어 PDF로 저장한다면, 윈도우에서 제공하는 기능은 진정한 PDF 변환이다.

글자는 글자대로, 이미지는 이미지대로 드래그가 가능한 진정한 PDF 저장인 것이다.

 

내가 구현한 PDF 저장 기능은 요구사항과 부합했지만, 나도 진정한 PDF 기능을 만들고싶어 그 당시 고군분투했다.

하지만.... 내공이 부족한 탓으로 결국 글자만 제대로 말리고, 차트와 이미지는 들어가지 않았던 기억이 있다.

'나중에 꼭 PDF 기능을 완성해봐야지' 생각했었다.