Notice
Recent Posts
Recent Comments
Link
«   2025/03   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
Archives
Today
Total
관리 메뉴

성빈

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

React

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

성빈나 2024. 8. 6. 17:25

 

📚 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)

프로젝트를 진행하면서 PDF 다운로드(PDF 작성) 기능을 구현하게 되었다. 처음에는 간단하게 jsPDF와 html2canvas 라이브러리의 조합으로 해결해보려고 했지만, 역시 간단하기만 한 것은 의도대로 사

devlifetestcase.tistory.com

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)

저의 포스팅에서는 자세한 지식보다는 사용법 위주로 작성되며, 개인적인 내용을 포함하고 있습니다!이번 포스팅은 파일 업로드/다운로드 중 파일 다운로드를 할 예정이다.업로드 할 파일 선택

velog.io

 

https://devmemory.tistory.com/98

 

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

이번에는 특정 html element를 pdf로 만들어서 활용하는 예제를 만들어봤습니다 먼저 사용한 라이브러리는 2개로 jspdf : pdf를 만들 수 있는 라이브러리 (링크: https://www.npmjs.com/package/jspdf) html2canvas : ht

devmemory.tistory.com

 

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

This article will introduce you to a collection of libraries for creating PDFs in Javascript, comparing their uses and how they are used. Also, compared to the following aspects is it easy to handle in a modern front-end? works in Node and browser? Is it a

dev.to

 

'React' 카테고리의 다른 글

CORS 에러  (0) 2024.08.06
dangerouslySetInnerHTML/html-react-parser  (0) 2024.08.06
useHistory 그리고 useNavigate  (0) 2024.07.23
react-router-dom 오류  (2) 2024.07.23
fetch와 axios  (1) 2024.07.23