Recruit

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

Blog

Isamu Mizuno

Senior Engineer

こんにちはミズノです。
先日、某案件で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のダウンロード、右クリックを禁止にすることも可能みたいなので今後も使う機会がありそうです。
それではまた。

参考サイト

Return back

Recommend

Contact Us