성빈
PDF 전환 라이브러리 비교 (jsPDF 라이브러리 + html2canvas 라이브러리, pdfmake, puppeteer, PDFKit, react-pdf) 본문
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
[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 |