React PDFでPDFを扱う方法と実務へのヒント

フロントエンド開発•2025/1/23

Reactを学び始めると、Webアプリケーションの中でPDFを表示したいと思うことがあるかもしれません。 PDFを生成する必要がある場面に出会う方もいるでしょう。そうした状況で便利なのが React PDF と呼ばれるライブラリ群です。ここでは、それらを使ってPDFを扱う具体的な方法を解説します。難しい手順は少しずつ丁寧に確認していきましょう。

React PDFとは

React PDFという名前は、主に2つの使い方を指していることがあります。ひとつはブラウザ上でPDFをプレビューするための react-pdf パッケージ、もうひとつはPDFを生成するための @react-pdf/renderer パッケージです。それぞれ機能が異なるため、まずは何をしたいのかを整理すると混乱を避けられます。

Reactアプリケーション内にPDFプレビューを埋め込みたい場合は、react-pdfが便利です。一方、Reactのコンポーネントを利用して新しいPDFファイルを生成したい場合には@react-pdf/rendererが役立ちます。初心者の方でも取り組みやすいのは、react-pdfを使ったPDFの表示からかもしれません。また、それぞれのパッケージが持つ特徴を正しく把握し、実務における要件を踏まえて選択すると良いでしょう。

ReactでPDFを表示する方法

React上でPDFを表示するには、 react-pdf ライブラリが手軽です。このライブラリでは、PDFファイルを読み込んで複数ページを順番にレンダリングする仕組みが提供されています。

インストールは以下のように行います。


npm install react-pdf

インストール後、主に Document と Page というコンポーネントを使って画面上にPDFを表示できます。シンプルなコード例を見てみましょう。


import { useState } from "react";
import { Document, Page } from "react-pdf";

function PdfViewer() {
  const [numPages, setNumPages] = useState(null);

  function onDocumentLoadSuccess(pdf) {
    setNumPages(pdf.numPages);
  }

  return (
    <div>
      <Document file="/sample.pdf" onLoadSuccess={onDocumentLoadSuccess}>
        {Array.from(new Array(numPages), (el, index) => (
          <Page key={index} pageNumber={index + 1} />
        ))}
      </Document>
    </div>
  );
}

export default PdfViewer;

上の例では、file プロパティにPDFファイルのパスを指定し、onDocumentLoadSuccess で読み込みが成功したタイミングをキャッチしています。その後、ページ数を取得し、動的にページコンポーネントを並べているのがポイントですね。複数ページのPDFでも、ページが増えるたびに同様のパターンでレンダリング可能です。

この方法なら、Reactコンポーネント内でPDFをスムーズに表示できます。もし外部サイトからPDFを読み込む場合は、file にURLを指定すると良いでしょう。ただし、同一オリジンポリシーなどのセキュリティ設定に注意が必要なことがあります。

実務での利用例

Reactアプリケーションを開発していると、ユーザーに取引明細や帳票のようなPDFドキュメントを見せたい場面があります。たとえば、ネットショップで注文履歴を参照したいときや、契約書のドラフト版を共有したいときなどです。

そういった場合にreact-pdfを組み込むと、ユーザーがページを移動する手間を減らしつつ、ブラウザ内で直接PDFを閲覧できます。画面切り替えが少なくなることで、利用者の利便性は高まりそうですね。

また、PDFのページ指定や拡大・縮小などの機能を追加実装すれば、より柔軟な閲覧体験を提供できます。このように、小規模なWebサービスから社内用システムまで幅広く応用しやすいでしょう。

PDFリンクを直接ダウンロードするだけでは物足りない場合、Reactアプリ側でプレビューを用意するという選択肢が有効です。将来的に機能を拡張して印刷用レイアウトを確認できるようにするなど、さらに使い勝手を向上させることも考えられます。

PDF生成における応用

ReactからPDFを生成したい場合は @react-pdf/renderer が注目されます。これは、まるでReactのコンポーネントを組むようにPDFのレイアウトを定義できる点が特徴です。

インストールは以下の通りです。


npm install @react-pdf/renderer

サンプルとして、簡単なPDFを生成するコードを書いてみます。


import React from "react";
import ReactDOM from "react-dom";
import { Page, Text, View, Document, StyleSheet, PDFDownloadLink } from "@react-pdf/renderer";

const styles = StyleSheet.create({
  page: { backgroundColor: "#ffffff", padding: 20 },
  section: { marginBottom: 10 }
});

function MyPDF() {
  return (
    <Document>
      <Page style={styles.page}>
        <View style={styles.section}>
          <Text>React PDFで生成したサンプル</Text>
        </View>
        <View style={styles.section}>
          <Text>ここにテキストを配置できます</Text>
        </View>
      </Page>
    </Document>
  );
}

function App() {
  return (
    <div>
      <PDFDownloadLink document={<MyPDF />} fileName="sample.pdf">
        {({ loading }) => (loading ? "生成中..." : "PDFをダウンロード")}
      </PDFDownloadLink>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

ここではページやテキストをコンポーネントとして定義し、PDFのレイアウトを指定しています。そして PDFDownloadLink を利用すると、生成したPDFをダウンロードリンクとして表示できます。 Web画面の見た目と同じ感覚で配置を考えられるため、HTMLやCSSに慣れている方には取り組みやすいはずです。

React PDFを活用するときのポイント

React PDF関連のライブラリは、React開発における拡張的な機能を補う役割を持っています。導入する前に、自分のプロジェクトが「PDFを閲覧したいのか、それともPDFを作りたいのか」を明確にしておきましょう。

次の表は、一般的な使い方とメリット・デメリットの例をまとめたものです。

使い方	メリット	デメリット
PDF表示	ブラウザ内で直接プレビュー	大きなPDFの場合、読み込み時間に注意が必要
PDF生成	レイアウトを柔軟に定義可能	PDF出力が複雑な場合、スタイル調整が手間になる

上の表のように、それぞれ適した場面が異なるため、要件に合わせた手法を検討することが大切です。

注意したい点と対策

ReactでPDFを扱うとき、いくつかの注意点があります。事前に対策しておけば、スムーズに開発を進められるでしょう。

ネットワーク負荷

PDFファイルはサイズが大きいケースが多いです。そのため、通信量が増えすぎないようにCDN等の配信最適化を検討してください。

セキュリティ

外部URLからPDFを取得する場合、アクセス権限や認証情報の扱いを慎重に考える必要があります。 JSON Web Tokenを用いた認証や、APIゲートウェイでの制御などを検討すると良いかもしれません。

表示の安定性

一部のブラウザやモバイル端末で、PDFの表示に影響が出ることがあります。主要ブラウザで挙動確認を行い、問題がある場合は他の方法を検討するのも選択肢です。

PDF生成時には、スタイルやフォントの埋め込み方法に注意が必要です。フォントが正しく表示されない可能性があるため、事前に仕様を確認しましょう。

もし複雑なデザインを行う場合は、レイアウトが期待通りにならないこともあります。何をどこに配置するのか、先に紙に書き出してみるのも分かりやすいですね。

React PDFの今後の展望

React PDFライブラリは、コミュニティの開発が活発に行われています。 Reactの進化に合わせて新しい機能が追加される可能性もあるため、ドキュメントを随時チェックしておくと良いでしょう。また、TypeScriptで型定義を利用するプロジェクトも増えており、エディタの支援を受けながら安全にPDF操作を実装する例も増えつつあります。

将来的にPDFの電子署名や注釈追加機能を組み込みたいという要望があるなら、React PDFの周辺ツールを探してみるのも手です。ただし、必要な機能を正確に把握したうえでライブラリを選定しないと、不要に複雑な実装になってしまう場合もあるかもしれません。

プロジェクトの要件が明確であればあるほど、React PDFを含む各種ツールを効果的に活用できます。事前に仕様やゴールを整理しておきましょう。

まとめ

Reactアプリケーション内でPDFを表示する方法として react-pdf を使えば、複数ページのドキュメントを簡単にプレビューできます。さらにPDFファイル自体を作成したい場合は @react-pdf/renderer を使うことで、Reactコンポーネント感覚でレイアウトを定義しながらPDFを生成できます。

実務では、表示するPDFのサイズやブラウザ互換性、認証などの要素を総合的に考えて導入しましょう。必要に応じてライブラリを組み合わせたり、キャッシュ戦略を立てたりすることで、より快適なユーザー体験を作り出せる可能性があります。

React PDFを知っておくと、フロントエンドでのPDF操作がずいぶん身近に感じられるでしょう。初心者の方であってもReactと基本的なJavaScriptの理解があれば、大まかな仕組みをすぐに掴めるはずです。皆さんもぜひ、自分のプロジェクトに合ったやり方でReact PDFを取り入れてみてください。