wojtekmaj/react-pdf

어떤 프로젝트인가요?

핵심 기능

• 01Document 및 Page API를 사용해 PDF 페이지를 React 컴포넌트로 렌더링합니다.
• 02URL, base64 콘텐츠, Uint8Array 데이터, 가져온 파일을 소스로 사용할 수 있습니다.
• 03React Suspense 및 Error Boundaries와 통합되며, 기존 로딩 모드도 사용할 수 있습니다.
• 04선택 사항인 스타일시트를 통해 주석 및 텍스트 레이어를 지원합니다.
• 05비라틴 문자 및 특수 이미지 형식에 필요한 cMaps, WebAssembly 디코더, 표준 글꼴을 불러옵니다.

활용 사례

• 계약서나 보고서처럼 업로드했거나 호스팅된 PDF 문서를 React 웹 앱 안에 표시합니다.
• 페이지 탐색과 비밀번호 입력을 지원하는 사용자 지정 PDF 뷰어를 만듭니다.
• 목차 사이드바를 포함해 PDF 미리보기나 썸네일을 표시합니다.

빠른 시작

1. 1

   npm으로 React-PDF를 설치합니다

   npm install react-pdf
2. 2

   Document와 Page를 가져오고 Suspense 및 Error Boundary 안에서 PDF를 렌더링합니다

3. 3

   PDF 컴포넌트를 렌더링하는 모듈과 같은 모듈에서 PDF.js worker를 설정합니다

사용 전 알아둘 점

• !최신 버전에는 React 19 이상이 필요합니다.
• !Node.js 22.13.0 이상이 필요합니다.
• !PDF.js worker와 라틴 문자 이외의 텍스트를 위한 cMaps를 로드하려면 추가 설정이 필요합니다.

포함된 컬렉션

토픽

자주 묻는 질문

react-pdf은(는) 무엇인가요?

PDF.js를 기반으로 React 앱에서 PDF 파일을 이미지처럼 페이지 단위로 표시하는 React 컴포넌트 라이브러리입니다. React-PDF를 사용하면 React 애플리케이션에서 기존 PDF 문서를 표시할 수 있습니다. URL, base64 문자열, Uint8Array 또는 가져온 파일 등 파일 소스를 지정한 Document 컴포넌트를 배치하고, 그 안에 Page 컴포넌트를 추가해 각 페이지를 렌더링합니다. 이 라이브러리는 PDF 생성이 아니라 보기에 초점을 둡니다. React로 PDF를 만드는 프로젝트로는 @react-pdf/renderer를 안내합니다.

react-pdf은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

react-pdf은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

react-pdf은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. react-pdf의 마지막 커밋은 2026년 10월 28일입니다.

react-pdf은(는) 어디에 사용할 수 있나요?

계약서나 보고서처럼 업로드했거나 호스팅된 PDF 문서를 React 웹 앱 안에 표시합니다. 페이지 탐색과 비밀번호 입력을 지원하는 사용자 지정 PDF 뷰어를 만듭니다. 목차 사이드바를 포함해 PDF 미리보기나 썸네일을 표시합니다.

react-pdf는 어떻게 설치하나요?

npm으로 React-PDF를 설치합니다: npm install react-pdf Document와 Page를 가져오고 Suspense 및 Error Boundary 안에서 PDF를 렌더링합니다 PDF 컴포넌트를 렌더링하는 모듈과 같은 모듈에서 PDF.js worker를 설정합니다

react-pdf은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/wojtekmaj/react-pdf