개발공작소
728x90
반응형
article thumbnail
[JS] html2canvas + jspdf 조합으로 HTML에서 원하는 영역을 PDF로 변환해보자.
FrontEnd/JavaScript 2023. 11. 13. 12:58

작업 전.. html2canvas 및 jspdf 라이브러리에 대한 설명.. 우선 2개의 라이브러리를 대충 설명하면 html2canvas : DOM을 기반으로 하여 전체 또는 특정 영역의 스크린샷을 생성하는 라이브러리 jsPDF : javascript로 PDF를 생성해주는 라이브러리 대충 위와 같은 기능을 제공하는 라이브러리인 것만 인지하고 아래 그림을 보도록 하자. 우리가 작성한 HTML을 PDF로 변환하는 과정은 위와 같다. 보통 인쇄 기능을 구현하거나, PDF로 변환할 때 사용자가 원하는 엘리먼트를 잡고 body를 변경해주거나, 직접 파라메터로 HTML 엘리먼트를 넣어주는데 여기서는 HTML 엘리먼트를 우선 이미지로 변환한 뒤, PDF로 변환해준다. ( 물론 인쇄도 된다. ) 대충 이해 했으면 이제 ..

728x90
반응형