React で PDF.js を使って PDF を表示する

こんばんは。

今日は「ReactでPDF.jsを使ってPDFを表示する」について説明します。

pdfjs-distでできること

• 既存のPDFファイルを取得し、ブラウザ内で表示する
• その上にテキストや画像をオーバーレイして表示する（※生成はしないが、画面表示での加工は可能）
• テキスト抽出や注釈表示など、PDFの読み取り系の処理

パッケージのインストール

npm install pdfjs-dist

PDF.js の設定

pdfjs-distをWebpackなどで利用する場合は、Worker(pdf.worker.js)の設定が必要です。
下記例では pdfjsDist を変数として読み込み、GlobalWorkerOptions.workerSrcに pdf.worker.min.jsのパスを設定しています。

// pdfjsを読み込み
import * as pdfjsLib from 'pdfjs-dist';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.js';

// PDF.jsのワーカーの場所を設定
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

npm でインストールした場合のパスやbundlerの設定によって書き方が若干異なります。
create-react-app + webpackの場合は上記のようにインポートできます。

React コンポーネントで表示

以下のサンプルでは、MyPdfViewerコンポーネントとして定義し、指定したPDFの1ページ目を <canvas>に描画しています。

import React, { useEffect, useRef } from 'react';
import * as pdfjsLib from 'pdfjs-dist';
// v3系の場合、レガシービルドを利用（後述の注意点を参照）
import 'pdfjs-dist/legacy/build/pdf.worker.entry';
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.js';

// もし v2系や別のビルドを利用する場合は import が異なる場合があります
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

type MyPdfViewerProps = {
  pdfUrl: string; // 表示したいPDFファイルのURL
};

const MyPdfViewer: React.FC<MyPdfViewerProps> = ({ pdfUrl }) => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    const loadPdf = async () => {
      if (!canvasRef.current) return;

      // PDF を取得
      const pdf = await pdfjsLib.getDocument(pdfUrl).promise;

      // ここではサンプルのため 1ページ目を表示
      const page = await pdf.getPage(1);
      const viewport = page.getViewport({ scale: 1.0 });

      // canvas のサイズを viewport に合わせて変更
      const canvas = canvasRef.current;
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      // PDF.js でレンダリング
      const renderContext = {
        canvasContext: canvas.getContext('2d')!,
        viewport: viewport,
      };
      await page.render(renderContext).promise;
    };

    loadPdf();
  }, [pdfUrl]);

  return (
    <div>
      <canvas ref={canvasRef} />
    </div>
  );
};

export default MyPdfViewer;

v3 系の場合の注意点

pdfjs-distv3系を使う場合、import 'pdfjs-dist/legacy/build/pdf.worker.entry';のようにレガシービルドをインポートする必要があります。
これは、現状多くの React プロジェクトでは
pdfjs-dist/legacy/配下のビルドを使ったほうが無難なケースが多いためです。

pdfjs-distは生成用途には向いていません。

まとめ

• pdfjs-dist(PDF.js)は基本的に PDFを「表示」する用途で使う
• PDFを「生成(作成)したい場合は、jsPDFなどの別ライブラリを使用する

もし既存PDFをReactアプリ上でプレビュー表示したいのであれば、pdfjs-dist を使って上記のように <canvas>や<div>に描画できます。一方、新しいPDFファイルを生成しユーザーにダウンロードさせたり保存するには、別のライブラリを選択するのが一般的です。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。