今回は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です。
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ビューワーが適切な場合もあるかと思います。「どのような機能が使えるの？」と気になった方はこちらもご覧いただければと思います。