copy_people copy_things copy_matter ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2021/07/09

PDF内の特定のページにリンクさせる【PDF.js】

INDEX

    こんにちはミズノです。
    先日、某案件でWebページからPDF内の特定のページにリンクさせたいという要望がありました。
    PDF内の特定のページにリンクさせるにはリンクURLの末尾に#page=nとパラメータを追加する方法があるのですが以下の問題点がありました。

    ・Adobe Acrobat製品のプラグインをインストールしている必要がある
    ・iOS、Androidでは特定のページにリンクしない(2021年7月現在)

    そこでプラグインなしでWeb上でPDFを閲覧することができるPDF.jsを使用することで上記の問題点を解決することができました。
    今回はPDF.jsの実装方法を紹介したいと思います。

    PDF.jsとは

    • HTML5で構築されたPortable Document Format(PDF)ビューア
    • Firefoxバージョン19以降に組み込まれておりMozillaによってサポートされているので品質が高い
    • ユーザーがブラウザ上でPDFファイルを閲覧することができる

    DEMO

    実際にDEMOをご覧ください。

    実装方法

    ダウンロード

    下記からPDF.jsをダウンロードします。
    DEMOではStable(v2.8.335)を使用しています。
    https://mozilla.github.io/pdf.js/getting_started/#download

    ちなみにv2.6.347以降はIE11および非ChromiumベースのEdgeのサポートは終了しているのでIE対応が必要な場合はpdfjs-2.6.347-es5-dist.zipをダウンロードする必要があります。
    https://github.com/mozilla/pdf.js/releases/tag/v2.6.347

    PDF.jsを設置する

    ダウンロードしたzipファイルを解凍しサーバー上にアップします。
    フォルダ名はリネームしても大丈夫なのでpdfjsに変更しておきます。
    DEMOのディレクトリ構造は下記の通りです。

    .
    ├── css
    │   └── style.css
    ├── index.html
    ├── js
    │   └── pdfjs
    │       ├── LICENSE
    │       ├── build
    │       └── web
    └── pdf
        └── demo.pdf
    

    aタグにパスとパラメータを記述する

    <a href="./js/pdfjs/web/viewer.html?file=../../../pdf/demo.pdf#page=4&zoom=page-fit">
    // ※pdfjsフォルダとpdfファイルをどこの階層に入れたかでパスは変わります

    ./js/pdfjs/web/viewer.html
    webフォルダのviewer.htmlまでのパスを記述します。
    絶対パス、相対パスどちらでも可能です。

    ?file=../../../pdf/demo.pdf
    ?の後に表示させたいPDFファイルのパスを記述します。
    絶対パス、相対パスどちらでも可能です。

    #page=4
    PDF内の4ページ目にリンクさせます。

    zoom=page-fit
    表示サイズをページのサイズに合わせます。

    まとめ

    カスタマイズ次第ではPDFのダウンロード、右クリックを禁止にすることも可能みたいなので今後も使う機会がありそうです。
    それではまた。

    参考サイト

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View