PDF 전환 라이브러리 비교 (jsPDF 라이브러리 + html2canvas 라이브러리, pdfmake, puppeteer, PDFKit, react-pdf)

 

📚 PDF 전환 라이브러리

프로젝트 진행 중, 자체 어플리케이션에서 문서를 직접 PDF 형식으로 다운로드하는 기능을 제공하기 위해 PDF 전환 라이브러리를 조사하게 되었다.

 

1️⃣ jsPDF 라이브러리 + html2canvas 라이브러리

• jsPDF
  • html, 이미지, canvas 객체를 PDF로 변환해주는 라이브러리
  • HTML 요소를 직접적으로 PDF로 변환하는 기능은 제공하지 않고
  • 텍스트, 이미지 등의 기본적인 요소를 PDF에 추가하는 기능만을 제공하기 때문에 html2canvas 라이브러리와 함께 사용된다.
• html2canvas
  • html 객체를 canvas로 변환해주는 라이브러리
  • HTML 요소를 캔버스 요소로 변환하는 기능을 제공한다.
  • 캔버스 요소는 그 자체로 이미지 데이터를 가지고 있기 때문에, 이를 jsPDF가 처리할 수 있는 이미지 형태로 변환하는 것이 가능하다.
• 먼저 html2canvas를 이용해 HTML 요소를 캔버스로 변환하고, 그 결과를 jsPDF에 전달하여 PDF 문서를 생성한다.
• HTML 페이지의 레이아웃과 스타일을 그대로 유지하면서 페이지를 PDF로 변환하는 데 매우 유용하다.
• 장점
  • 간단하고 직관적인 API 제공
  • 브라우저와 서버측에서 모두 사용 가능해 플랫폼에 제약이 없다.
• 단점
  • 복잡한 레이아웃이나 많은 양의 데이터를 처리하기에는 적합하지 않다.
  • 스타일링 기능이 제한적일 수 있다.

 

 

2️⃣ pdfmake

• 순수 자바스크립트에서 서버 측 및 클라이언트 측 사용을 위한 PDF 문서 생성 라이브러리
• 특징
  • 라인 래핑,
  • 텍스트 정렬 (왼쪽, 오른쪽, 중앙, 정당화),
  • 번호가 매겨진 글머리 기호 목록,
  • 표와 기둥
    • 자동/고정/별 크기 너비,
    • 콜 스팬과 로우 스팬,
    • 페이지 나누기의 경우 자동으로 반복되는 헤더,
  • 이미지와 벡터 그래픽,
  • 편리한 스타일링과 스타일 상속,
  • 페이지 머리글과 바닥글:
    • 정적 또는 동적 콘텐츠,
    • 현재 페이지 번호와 페이지 수에 대한 접근,
  • 배경 레이어,
  • 페이지 크기와 방향,
  • 여백,
  • 사용자 지정 페이지 나누기,
  • 글꼴 삽입,
  • 복잡하고 다단계(중첩된) 구조에 대한 지원,
  • 목차,
  • 생성된 PDF를 열기/인쇄/다운로드하는 도우미 방법,
  • PDF 메타데이터 설정(예: 저자, 주제).
• 장점
  • JSON형식이여서 구조화된 문서 생성이 쉽다.
  • 다양한 기능을 제공하여 고급 PDF 생성이 가능하다. (복잡한 문서 구조를 다루기에 적합하다.)
  • 클라이언트와 서버 모두 사용 가능하다.
• 단점

 

 

3️⃣ puppeteer

• 장점
  • 웹 페이지를 그대로 캡쳐하여 PDF로 변환할 수 있어, 복잡한 레이아웃이나 스타일링을 쉽게 다룰 수 있다.
  • 브라우저 자동화 도구로서, 웹 페이지를 조작하거나 스크래핑하는 등의 다양한 기능을 제공한다.
• 단점
  • Node.js 환경에서만 사용할 수 있다.
  • 크롬 브라우저를 내부적으로 사용하므로, 라이브러리의 용량이 크고 메모리 사용량이 많다.
  • 페이지 로딩이나 렌더링 시간이 추가로 필요하므로, 대량의 PDF를 빠르게 생성하는 데에는 한계가 있을 수 있다.
  • 대량의 페이지를 처리할 때 성능 문제 발생 가능

 

 

4️⃣ PDFKit

• 최초의 PDF 라이브러리
• 장점
  • 고급 PDF 생성을 위한 다양한 기능 제공
  • 서버 측, 브라우저 측에서 모두 실행 가능하다.
• 단점
  • 복잡한 API

 

5️⃣ react-pdf

• 리액트 컴포넌트를 PDF로 변환할 수 있다.
• 복잡한 문서 구조와 이미지, 표 등을 다루기에 적합한 라이브러리
• PDFDownloadLink 컴포넌트를 사용하여 PDF 파일을 다운로드 할 수 있는 링크를 생성 가능
• 장점
  • 리액트와의 호환성이 뛰어나다.
  • PDF 문서를 생성하기 위한 컴포넌트 기반 접근 방식이여서 쉽게 구성하고 제어할 수 있다.
  • 애플리케이션 내에서 동적으로 PDF를 생성할 수 있다.
  • 서버와 클라이언트 양쪽에서 모두 사용할 수 있다.
• 단점
  • 브라우저에서 실행되기 때문에 특정 브라우저에서 제한될 수 있다.
  • 많은 양의 이미지나 텍스트를 포함하는 PDF를 생성할 때 렌더링 속도가 느릴 수 있다.
  • PDF 생성을 위한 간단한 도구이기 때문에 고급기능이나 복잡한 레이아웃을 구현하기에는 적합하지 않을 수 있다.
  • 기존의 PDF 파일을 읽거나 수정할 수 없다.

 

 

 

---

참고

https://devlifetestcase.tistory.com/62

[Spring Legacy / Javascript / jsPDF] PDF 다운로드 기능 구현 - 1. 텍스트, Footer 생성 (feat. jsPDF-autotable, error)

https://velog.io/@mjhyp88/ReactTypscript-%ED%8C%8C%EC%9D%BC%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84With.-Springboot

[React+Typscript] 파일다운로드 기능 구현(With. Springboot)

 

https://devmemory.tistory.com/98

React - make html element to pdf(Feat. jspdf, html2canvas)

 

https://dev.to/handdot/generate-a-pdf-in-js-summary-and-comparison-of-libraries-3k0p

A full comparison of 6 JS libraries for generating PDFs