HTML 을 PDF, PPT, Word 로 export 하는 방법

출처 : html  to canvas 공식문서

많은 방법이 있겠지만, 내가 소개하는 방법은 기본적으로 html2canvas를 이용하는 것이다.

html2cavnas : selector로 집어온 html을 base64 포맷의 이미지로 만들어주는 기능을 제공한다.  

base64화된 이미지를 그대로 PDF, PPT, Word로 export해주는 툴에 붙여 넣으면 된다. 참 쉽죠?

이미지에 한해서는 이런 방식으로 해결이 가능하다. 사실 이미지 넣는게 가장 어려웠는데... ㅎㅎ;; 

그 외의 것들은 공식문서에 다 친절히 나와있더라.

 

아래 소스코드의 canvas.toDataURL('image/png') 라는 코드는 base64를 반환한다.

PDF 로  export 하는 기능. jspdf 를 이용하였다.

Word로 export 하는 기능. docx.js를 이용하였다. 

PPT로 export 하는 기능. pptgenjs를 이용하였다.

생각보다는 내용이 간단하게 끝났다.  다행이다.

이주가량 붙잡고 있던 내용인데 헣... 뭔가 기분이 묘하다. 

이 글을 보는 누군가에게 도움이 되었으면 좋겠다.

 

---

덤. 개발 환경에서는 아무 문제가 없다가 실제 서버에서 빌드 문제가 생긴 적이 있었는데,  jszip이 문제를 일으켰었다. 아래 코드를 추가해주면 문제없이 잘 동작한다. 단 경우에 따라 jszip.min.js 인 경우도 있는 모양이더라. node_modules/jszip의 dist 디렉토리를 잘 확인해보자.

tsconfig.json 의 compileroption에 해당 코드를 추가하자.

---

https://html2canvas.hertzen.com/

html2canvas - Screenshots with JavaScript

http://html2canvas.hertzen.com/documentation/

About - html2canvas

https://github.com/mrrio/jspdf

MrRio/jsPDF

https://docx.js.org/#/

docx - Generate .docx documents with JavaScript

https://gitbrent.github.io/PptxGenJS/

PptxGenJS · JavaScript library that creates PowerPoint presentations