wojtekmaj/react-pdf

これは何？

主な機能

• 01DocumentとPageのAPIを使い、PDFの各ページをReactコンポーネントとして描画する。
• 02URL、base64データ、Uint8Arrayデータ、インポートしたファイルをデータソースとして受け付ける。
• 03React SuspenseとError Boundariesに対応し、旧来の読み込みモードも利用できる。
• 04オプションのスタイルシートを使って、注釈レイヤーとテキストレイヤーに対応する。
• 05cMaps、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を基盤に、PDFの各ページを画像のように表示するReactコンポーネントライブラリ。 React-PDFを使うと、既存のPDFドキュメントをReactアプリケーションに表示できます。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