GaramX

html2canvas And jspdf

회사에서 업무를 진행하면서 현재 화면을 pdf로 만들어야하는 일이 있었다.

기존에 html을 pdf로 스프링에서 만드는 업무는 진행을 했었다. 이때는 이전에 포스팅을 했었으니 참고 하시면 좋을 것 같다. (Spring에서 html2pdf를 사용해서 pdf파일 만들기)

우선 현재 화면을 딱 캡쳐해서 image로 만드는 작업이 필요했다. 그 작업을 제공해주는 라이브러리가 바로 html2canvas이다.

html2canvas

우선 html2canvas를 사용하기 위해 파일을 받아보자.

npm install –save html2canvas 캡처를 진행하기 위해서는 캡처하고자 하는 영역을 selector로 위치를 받아서 지정할 수 있다.

우선 캡처를 진행할 화면을 간단하게 만들어보자.

  <h4 style="color: #000; ">Hello world! Wedul Capture Test!</h4>

<button id=“captureBtn” style=“padding:20px;margin-top:15px;”>Capture Start!!</button>

하단에 captureBtn 버튼을 누를 경우에 capture영역이 image로 떨어지도록 javascript를 만들어보자.

버튼 클릭할 시 캡처한 내용 body에 붙혀보기 $('#captureBtn').click¹⁾

¹⁾
e) ⇒ {
html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
}); 캡처 방식이 생각보다 너무 간단하다. querySelector로 영역을 선택하고 html2canvas라이브러리를 호출하면 프로미스를 사용하여 나온 canvas객체를 조작하여 image로 넣을수도 있고 특정 파일로 변경할 수도 있다. 결과는 다음과 같이 버튼을 눌렀을 때 바로 밑에 이미지가 추가되는 것을 확인할 수 있다. jsPDF 그럼 html2canvas로 출력된 image를 pdf 파일로 빼고 싶다면 어떻게 해야할까? 바로 jsPDF 라이브러리를 사용하면 된다. 홈페이지에 들어가면 자세하게 샘플코드가 나와있다. 그럼 간단하게 한번 만들어보자. 우선 pdf파일로 빼내기 위해서는 jsPDF 라이브러리가 필요하니 설치부터 진행하자. npm i jspdf –save import <script src=“./node_modules/jspdf/dist/jspdf.min.js”></script> 그리고 위에 html2canvas에서 사용한 문장을 그대로 사용하고 출력되서 나온 canvas를 사용하여 pdf로 만들어보자. 버튼 클릭할 시 캡처한 내용 body에 붙혀보기 $('#captureBtn').click((e) ⇒ {
html2canvas(document.querySelector("#capture")).then(canvas => { // jsPDF 객체 생성 생성자에는 가로, 세로 설정, 페이지 크기 등등 설정할 수 있다. 자세한건 문서 참고. // 현재 파라미터는 기본값이다 굳이 쓰지 않아도 되는데 저것이 기본값이라고 보여준다. var doc = new jsPDF('p', 'mm', 'a4');

// html2canvas의 canvas를 png로 바꿔준다. var imgData = canvas.toDataURL('image/png'); //Image 코드로 뽑아내기

// image 추가 doc.addImage(imgData, 'PNG', 0, 0);

// pdf로 저장 doc.save('sample-file.pdf'); });
}); 출처: https://wedul.site/406 [wedul]

GaramX

사용자 도구

사이트 도구

html2canvas And jspdf

문서 도구