dom-to-image.js 라이브러리란? 웹페이지의 DOM요소를 이미지로 변환하도록 도와주는 라이브러리 dom-to-image.js를 사용하게 된 계기 이전에도 DOM을 이미지로 변환하여, PDF 형태로 추출한 적이 있다. 그때는 html2canvas + jsPdf 라이브러리 조합으로 기능을 구현했었는데... 링크 참조 이번에 똑같은 기능을 구현 할 일이 있어서 그냥 되겠지.. 라고 생각해서 구현을 했는데 왠 걸? 스타일이 깨지는 상황이 발생했다.. 그래서 왜 그런건지 좀 알아보았는데, 대충 내가 생각하는 원인은 아래와 같았다. 1. html2canvas가 지원하는 css 속성이 제한적이다. html2canvas 라이브러리의 스타일 적용과 관련하여 검색을 조금 하면 다른 사람들도 조금 문제가 있다는 듯..

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