PDF.jsとは
HTML5 Canvasを使用してPortable Document Format (PDF) ファイルを
描画するJavaScriptライブラリです。(Wikipedia参照)
スマートフォンなどは、閲覧するために、一度PDFをダウンロードする必要がありますが
PDF.jsを用いることで、そのまま閲覧することができます。
また、Adobe Acrobatで設定したしおり機能をPC以外でも使うことができます。
設置方法
ダウンロードする
こちらのダウンロードサイトから、zipファイルをダウンロードして任意のディレクトリに解凍します。
stableで問題ないと思います
解凍した「pdfjs-(バージョン)-dist」を自身のサーバー上に設置します。
(file://〇〇から始まる、ローカルファイルは、エラーが出るため必ずサーバー上に設置しましょう)
HTML記述
表示させるために、リンクをHTMLに記述します。
今回は、aタグで記述しています。
※相対パスは「viewer.html」から参照します。
<a href="js/pdfjs/web/viewer.html?file=test.pdf">開く</a>
//pdfファイルをviewer.htmlと同じ階層に入れた場合
<a href="js/pdfjs/web/viewer.html?file=https://〇〇〇.co.jp/pdf/test.pdf">開く</a>
//絶対パスの場合の例
設置完了!
たったこれだけで、設置することができます!
まとめ
設置するだけで、コードなど変えなくても実装可能なので便利です!
また、自分好みに変更を加えれば、より良いものになりそうです!