2021-05-07

【Javascript】PDF.jsを使ってPDFのプレビュー画面を作成する方法

PDF.jsを使ってPDFのプレビュー画面を作成する方法

　この記事では、PDF.jsの使い方とそれを使用したPDFのプレビュー画面の作成方法をお伝えします。作成する画面にはPDFのページングや拡大・縮小機能を組み込みます。

ソースコードを一番最初に載せますので、読む時間がない方はコピペして使ってください。以前PDF.jsの使い方を調査した時、日本語の記事があまりなかったので書いてみました。

※ PDF.jsは最新版（2021年5月現在、バージョン：2.9.223）を使って試しています。ソースコードの説明時に詳しく説明します。

1. PDF.jsを使った全体のソースコード

　PDF.jsを使用したサンプルのプレビュー画面のソースコードが以下になります。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample PDF Viewer</title>
<style>
#canvas_container {
    /** pdf表示画面のCSS この辺りはカスタマイズしてください。 */
    height: 100%;
    overflow: auto;
    background: #333;
    text-align: center;
    border: solid 3px;
}
</style>
<script src="//mozilla.github.io/pdf.js/build/pdf.js">
</script>
</head>

<body>
    <div id="pdf_viewer">
        <div id="canvas_container">
            <canvas id="pdf_renderer"></canvas>
        </div>
        <div id="navigation_controls">
            <button id="go_previous">Previous</button>
            <button id="go_next">Next</button>
            <button id="zoom_in">Zoom In</button>
            <button id="zoom_out">Zoom Out</button>
        </div>
    </div>
    <script>

    // 表示したいPDFのパスを指定
    // https棟のURLでも可。ただしPDF配置サーバにCORSの設定をする必要あり。base64 encodeのPDFでも表示可能
    var url = '/pdf/sample.pdf';

    // PDF.js にアクセスするためのショートカット
    var pdfjsLib = window['pdfjs-dist/build/pdf'];

    // PDF.jsを使用するために「workerSrc」プロパティを指定する必要があるため指定
    pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
    var state = {
        pdf: null,
        // 表示ページ
        currentPage: 1,
        // 倍率 1.0は1倍
        zoom: 1.0
    }
    // PDFの読み込み
    pdfjsLib.getDocument(url).promise.then((pdf) => {
        state.pdf = pdf;
        render();
    });

    // PDFをレンダリングするファンクション
    function render() {
        state.pdf.getPage(state.currentPage).then(function(page) {
            var canvas = document.getElementById("pdf_renderer");
            var ctx = canvas.getContext('2d');
            // 倍率を指定
            var viewport = page.getViewport({scale: state.zoom});
            canvas.width = viewport.width;
            canvas.height = viewport.height;
            // レンダリング
            page.render({
                canvasContext: ctx,
                viewport: viewport
            });
        });
    }

    // 次のPDFのページを表示
    document.getElementById('go_previous')
    .addEventListener('click', (e) => {
        if (state.pdf == null || state.currentPage == 1) return;
        state.currentPage -= 1;
        render();
    });

    // 前のPDFページを表示
    document.getElementById('go_next')
        .addEventListener('click', (e) => {
           if (state.pdf == null || state.currentPage > state.pdf._pdfInfo.numPages) return;

           state.currentPage += 1;
           render();
    });

    // PDFのズームイン（拡大）
    document.getElementById('zoom_in').addEventListener('click', (e) => {
        if(state.pdf == null) return;
        // + 0.5倍
        state.zoom += 0.5;
        render();
    });

     // PDFのズームアウト（拡小）
    document.getElementById('zoom_out').addEventListener('click', (e) => {
        if(state.pdf == null) return;
        // - 0.5倍
        state.zoom -= 0.5;
        render();
    });
    </script>
</body>
</html>

CSSはかなり簡易的なものにしていますので、それぞれでカスタマイズしてください。以下の記事で少しCSSをおしゃれにしていますので、もし参考になれば幸いです。

【Javascript】PDF.jsで作ったPDFのプレビュー画面にPDFのダウンロード機能を作成する方法

2. 作成したPDF表示画面イメージと機能説明

　作成した画面イメージになります。左下にページング、拡大、縮小ボタンが配置してあります。

「Previous」「Next」ボタンがpdfのページングで使用されるボタンになります。また「Zoom In」「Zoom Out」ボタンでPDFの拡大・縮小をします。

2-1.「Next」ボタン押下時は次のPDFページを表示

　画像参照。2ページ目の「Simple PDF File 2」が表示されるようになります。

　※「Previous」ボタン押下時は前のページのPDFを表示

2-2.「Zoom In」ボタン押下時は表示されているPDFの表示を拡大

　下の画像参照。上の画像と比較して、表示が拡大されていることがわかると思います。

　※「Zoom Out」ボタン押下時は縮小表示

3. ソースコードの説明

　ソースコードの簡単な説明をします。ソースコード内のコメントで大体の説明は書いているので、一部だけ補足します。

〇PDF.jsの読み込み

<script src="//mozilla.github.io/pdf.js/build/pdf.js">

上記でまずPDF.jsを読み込んでいます。PDF.js配布サイトのExampleの読み込み方と同じ方法でPDF.jsを読み込んでいます。

ソースコードに関しては、先ほどのページも参考になると思いますので気になる方はみてください。また、PDF.jsをダウンロードして使いたい方は、先ほどの配布サイトからダウンロードできますのでご確認ください。

※ 私が今回サンプルで使っているPDF.jsのバージョンは2.9系になっていますが、ダウンロードできるものは、2.8が最新のようです。

〇読み込むPDFの指定方法

// 表示したいPDFのパスを指定
// httpsのURLでも可。ただしPDF配置サーバにCORSの設定をする必要あり。base64 encodeのPDFでも表示可能
var url = '/pdf/sample.pdf';

// PDF.js にアクセスするためのショートカット
var pdfjsLib = window['pdfjs-dist/build/pdf'];

// PDF.jsを使用するために「workerSrc」プロパティを指定する必要があるため指定
pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';

「url」という変数に読み込みたいPDFのURLを指定しています。同じサーバ内のPDFを読み込みたいようであれば、上のようにすればよいです。

また、コメントに書いてある通り別サーバー上のPDFも読み込めますが、その場合はそのサーバのCORSの設定に注意してください。base64エンコードしたPDFも読み込めます。

※PDF.js配布サイトのExample参照

5行目以降は指定する必要があるようなのでお作法的に書いています。その他の部分は、ソースコードを確認してもらえれば大丈夫です。

最後に

もし、ご質問等あれば、お問い合わせからご連絡いただければ幸いです。

最後まで読んでいただき、ありがとうございました。