본문 바로가기

개발이야기

[html to image] html 페이지를 이미지로 변경

내부적으로 html 페이지를 pdf로 변경하는안이 있었는데, 

이부분을 직접 pdf로 그릴려면 쉽지 않기도 하고, html페이지와 동일하게 pdf 를 만드는 것도 쉽지 않은일이라

html 인쇄에서 pdf로 인쇄하는 방안으로 해결함. (거의 그대로 나와서 큰 문제는 없었음.)

그런데 고객들에게 핸드폰으로 pdf로 전달하니 프로그램을 선택해서 열거나 좀 오래된 폰은 별도의 앱을 설치해야 하는 번거로움이 있다며 image로 처리해주길 원하는데, pdf를 이미지로 변경하는 프로그램들은 대부분 유료 ㅠㅠ 

(Acrobat 관련 프로그램 , 알PDF 등등 )

우선 html을 이미지로 변경하는 방안을 검색해보니 도움이 되는 링크가 있어서 기록함.

1. java에서 htm을 image로 변경하는 부분

-> 이부분은 css가 적용되지 않고, 순수한 html을 사용해야 비슷하게 나온다는 단점이 있어서 pass.. ㅠㅠ

https://whitecold89.tistory.com/48

 

[JAVA]html를 이미지로 변환

html를 이미지로 변환 HTML 화면을 이미지로 변환. HTML 파일을 이미지 파일로 변환 하는 것이 아니라, HTML를 웹브라우저로 열었을 떄 뜨는 화면을 이미지로 변환 하는 것 입니다. 이때 이 HTML 문서

whitecold89.tistory.com

2.  javascript를 활용

-> css 부분도 비교적 제대로 (?) 적용되나, 실무에서 쓰기에는 html 수정작업을 제법 해야 할 것으로 예상됨.
별도 협의를 해봐야겠으나, 디자이너/ 코더가 없는 상황에서 내가 작업하려면 생각보다 많은 시행착오를 겪거나
html도 별도로 다시 작업을 해야 할것 같은 느낌이 든다.

html2canvas : https://github.com/niklasvh/html2canvas

 

GitHub - niklasvh/html2canvas: Screenshots with JavaScript

Screenshots with JavaScript. Contribute to niklasvh/html2canvas development by creating an account on GitHub.

github.com

jsPDF(참고용) : https://github.com/MrRio/jsPDF

 

GitHub - parallax/jsPDF: Client-side JavaScript PDF generation for everyone.

Client-side JavaScript PDF generation for everyone. - GitHub - parallax/jsPDF: Client-side JavaScript PDF generation for everyone.

github.com

 

3.  java로 pdf를 image로 변경

-> 기존의 생성한 pdf 파일을 아파치의 PDFBox를 활용하여,  image 파일로 변경.
테스트해봤을때 퀄리티도 괜찮은데, 웹으로 서비스할 수있도록 개발이 필요하다. 
pdf를 upload해서 image로 download 받을 수 있도록 하면 될듯.
아무래도 한단계씩 더 움직여야 하니 실무자단에서의 반응에 따라서 개발여부가 진행될듯 하다.

http://pdfbox.apache.org/

 

Apache PDFBox | A Java PDF Library

Apache PDFBox® - A Java PDF Library The Apache PDFBox® library is an open source Java tool for working with PDF documents. This project allows creation of new PDF documents, manipulation of existing documents and the ability to extract content from docum

pdfbox.apache.org

 

그외에 html을 pdf 로 부분에서 iText를 활용하는 방안도 검토를 해봤지만, 역시나 css 부분이 일부 적용되나,
html tag 및 css 적용 그외 그래프 부분은 javascript로 처리되는데, 이부분이 제대로 표현안되는등 문제점이 제법 있어서 포기했으나, 참고로 기록해놓는다.

https://itextpdf.com/en

 

The Leading PDF Library for Developers | iText

We have an active community of partners, customers, and contributors, that help us every day to improve our products, documentation and support. We see them as part of our iText family, and hope you will join our family too.

itextpdf.com