ReactでPDFを扱う！表示から生成まで完全解説

こんにちは、とまだです。

ReactでWebアプリを作っていて、「PDFファイルを画面に表示したい」と思ったことはありませんか？

または「データからPDFを自動生成したい」なんて要望を受けたことがある方もいるでしょう。

実は、ReactにはPDFを扱うための便利なライブラリがあるんです。

今回は、PDFの表示から生成まで、初心者の方でも実装できるように解説していきます。

React PDFとは？

React PDFには大きく分けて2つの種類があります。

まるで双子のように名前は似ているけれど、役割は全然違うんです。

PDFを表示する「react-pdf」

こちらは、既存のPDFファイルをブラウザ上で表示するためのライブラリです。

図書館で本を開いて読むような感覚ですね。

PDFを生成する「@react-pdf/renderer」

一方こちらは、Reactコンポーネントを使ってPDFを作成するライブラリです。

まるでワープロソフトで文書を作るような感覚で、PDFを生成できます。

どちらを使うかは、やりたいことによって決まります。

まずは「表示」から見ていきましょう。

PDFを表示する方法

PDFの表示は、react-pdfを使えば簡単に実現できます。

まずはインストールから始めます。

npm install react-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;

このコードのポイントは、DocumentとPageという2つのコンポーネントです。

Documentは本全体、Pageは各ページを表していると考えると分かりやすいですね。

読み込みが完了すると、自動的に全ページが表示される仕組みになっています。

よくある質問

PDFの表示について、よく聞かれる質問をまとめました。

• 外部サイトのPDFも表示できる？
• ページを1枚ずつ表示したい
• 拡大・縮小機能は付けられる？
• モバイルでも正常に表示される？

これらはすべて実装可能です。

ただし、外部サイトのPDFを読み込む場合は、CORSの設定に注意が必要です。

実際の開発での活用シーン

PDFの表示機能は、様々な場面で活躍します。

例えば、こんなケースを想像してみてください。

オンラインショップの場合

お客様が過去の請求書を確認したいとき。

わざわざダウンロードしなくても、その場で内容を確認できます。

便利ですよね。

社内システムの場合

契約書のドラフトを関係者で確認するとき。

メールで送り合うよりも、システム上で直接見られる方が効率的です。

共有も簡単になります。

教育サービスの場合

教材のPDFを生徒に配布するとき。

ブラウザ内で直接閲覧できれば、学習体験がスムーズになります。

ダウンロードの手間も省けますね。

PDFを生成する方法

次は、PDFの生成について見ていきましょう。

@react-pdf/rendererを使います。

npm install @react-pdf/renderer

インストールが完了したら、実装に入ります。

import React from "react";
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>
  );
}

このコードは、HTMLとCSSを書く感覚でPDFを作成できます。

Viewはdivタグ、Textはpタグのようなものだとイメージしてください。

StyleSheetでスタイルを定義するのも、CSSと似ていますね。

使い分けのポイント

PDFの表示と生成、どちらを選ぶべきか迷うこともあるでしょう。

そんなときは、以下のポイントを参考にしてください。

PDF表示（react-pdf）がおすすめの場合

既存のPDFファイルがある場合はこちらです。

具体的には以下のような状況です。

• サーバーに保存されているPDFを見せたい
• 外部から取得したPDFを表示したい
• PDFの内容を変更する必要がない

PDF生成（@react-pdf/renderer）がおすすめの場合

動的にPDFを作る必要がある場合はこちらです。

例えば以下のようなケースです。

• ユーザーの入力データから請求書を作成
• データベースの情報から帳票を生成
• カスタマイズ可能なレポートを作成

どちらも便利なツールですが、目的に応じて使い分けることが大切です。

実装時の注意点

PDFを扱う際には、いくつか気をつけたい点があります。

事前に知っておけば、トラブルを避けられます。

ファイルサイズの問題

PDFは画像を含むと大きくなりがちです。

まるで重い荷物を運ぶように、読み込みに時間がかかることがあります。

対策として、以下の方法があります。

• CDNを活用して配信を高速化
• 画像の圧縮や最適化を行う
• 必要に応じてページ単位で読み込む

セキュリティの考慮

機密情報を含むPDFを扱う場合は要注意です。

まるで金庫の鍵のように、アクセス管理が重要になります。

以下の対策を検討しましょう。

• 認証済みユーザーのみアクセス可能にする
• PDFのURLを推測されにくくする
• 一定時間でアクセスできなくする

ブラウザの互換性

すべてのブラウザで同じように表示されるとは限りません。

まるで方言のように、ブラウザごとに微妙な違いがあります。

主要なブラウザでテストすることが大切です。

まとめ

ReactでPDFを扱う方法を見てきました。

表示には「react-pdf」、生成には「@react-pdf/renderer」を使います。

それぞれ得意分野が違うので、目的に応じて選びましょう。

最初は簡単な実装から始めて、徐々に機能を追加していくのがおすすめです。

PDFの扱いは一見難しそうに見えますが、実は基本を押さえれば意外とシンプルです。

今回紹介した方法を参考に、ぜひ実際のプロジェクトで試してみてください。