PDF.jsを使用してWebブラウザでPDFファイルを表示する

普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回はPDF.jsを使用してWebブラウザでPDFファイルを表示する方法ついてお届けします。

本記事では、WebブラウザでPDFファイルを表示するためによく使われるオープンソースライブラリの1つ「PDF.js」を使用して、WebページでPDFファイルを表示する方法を紹介します。

PDF.jsを使用してPDFファイルを表示する方法は2つあります。１つ目は<canvas>要素にPDFファイルをレンダリングする方法と、PDF.jsに付属のPDFビューワーを埋め込む方法です。

HTMLのcanvas要素にPDFファイルをレンダリングする方法

ビルド済みのPDF.jsを以下からダウンロードします。2023年3月時点で最新はv3.4.120です。

https://github.com/mozilla/pdf.js/releases

pdfjs-hello-worldフォルダを作成して、そこにダウンロードしたpdfjs-3.4.120-dist.zipからbuildフォルダとフォルダ内のファイル（pdf.js、pdf.js.map、pdf.worker.js、pdf.worker.js.map）をコピーします。

pdfsフォルダを作成して表示するPDFファイルdiodocs_a4_full.pdfをコピーします。

index.htmlを追加します。

index.htmlには<canvas>要素を追加しておきます。また、<script>要素でコピーしたpdf.jsを参照します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF.jsクイックスタート | PDFレンダリング</title>
  </head>
  <body>
    <canvas id="pdf-canvas"></canvas>
  </body>
  <script src="./build/pdf.js"></script>
</html>

index.jsを追加します。PDFファイルをレンダリングするコードをpdf.jsのGitHubリポジトリにあるこちらのコードをベースに記述します。

const pdfPath = "./pdfs/diodocs_a4_full.pdf";

pdfjsLib.GlobalWorkerOptions.workerSrc = "./build/pdf.worker.js";

// 非同期でPDFファイルを読み込み
const loadingTask = pdfjsLib.getDocument(pdfPath);
(async () => {
  const pdf = await loadingTask.promise;

  // 最初のページを取得
  const page = await pdf.getPage(1);
  const scale = 1.0;
  const viewport = page.getViewport({ scale });
  
  // 高DPIをサポート
  const outputScale = window.devicePixelRatio || 1;

  // PDFのページ寸法を使用してキャンバスを準備
  const canvas = document.getElementById("pdf-canvas");
  const context = canvas.getContext("2d");

  canvas.width = Math.floor(viewport.width * outputScale);
  canvas.height = Math.floor(viewport.height * outputScale);
  canvas.style.width = Math.floor(viewport.width) + "px";
  canvas.style.height = Math.floor(viewport.height) + "px";

  const transform = outputScale !== 1 
    ? [outputScale, 0, 0, outputScale, 0, 0] 
    : null;

  // PDFのページをキャンバスにレンダリング
  const renderContext = {
    canvasContext: context,
    transform,
    viewport,
  };
  page.render(renderContext);
})();

index.htmlにindex.jsを参照するscript要素を追加します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF.jsクイックスタート | PDFレンダリング</title>
  </head>
  <body>
    <canvas id="pdf-canvas"></canvas>
  </body>
  <script src="./build/pdf.js"></script>
  <script src="index.js"></script>
</html>

Visual Studio Codeの拡張機能「Live Server」を使用して開発サーバーを実行すると、起動したWebブラウザにpdf.jsで読み込んだPDFファイルが表示されます。

canvas要素にPDFファイルを表示する場合は、単一ページのみの表示になります。ページ移動やひ拡大縮小表示などは別途実装する必要があります。

PDF.jsに付属のPDFビューワーを埋め込む方法

pdfjs-embed-viewerフォルダを作成して、そこにダウンロードしたpdfjs-3.4.120-dist.zipからbuildフォルダとフォルダ内のファイル（pdf.js、pdf.js.map、pdf.worker.js、pdf.worker.js.map）をコピーします。

さらに、ダウンロードしたpdfjs-3.4.120-dist.zipからwebフォルダをまるごとコピーします。

index.htmlを追加します。

index.htmlには<iframe>要素を追加します。この<iframe>要素を使用してPDFビューワーを埋め込みます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF.jsクイックスタート | PDFビューワー</title>
  </head>
  <body>
    <iframe title="pdfjs-default-viewer" 
      src="web/viewer.html?file=diodocs_a4_full.pdf" 
      width="1200px" 
      height="700px">
    </iframe>
  </body>
</html>

webフォルダにPDFビューワーで表示するPDFファイルdiodocs_a4_full.pdfをコピーします。

先ほどと同じようにLive Serverを使用して開発サーバーを実行すると、pdf.jsのPDFビューワーに読み込んだPDFファイルが表示されます。

pdf.jsに付属のPDFビューワーでページ移動やスクロール、拡大縮小など、標準的な機能も備わっています。

さいごに

今回はpdf.jsを使用してWebブラウザでPDFファイルを表示する方法を確認してみました。単純にPDFファイルを確認する目的で表示するというケースでは十分な機能ではないでしょうか。

しかし、PDF注釈や墨消し、PDFフォームや署名など、より複雑なPDFの機能が必要なケースでは、グレープシティが提供するDioDocs for PDFのPDFビューワーが適切な場合もあるかと思います。「どのような機能が使えるの？」と気になった方はこちらもご覧いただければと思います。

＼この記事をシェアする／