恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

【JavaScript】簡単!PDF.jsの設置方法

投稿日:2021-05-04 更新日:




javascript

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>
    //絶対パスの場合の例

設置完了!

たったこれだけで、設置することができます!

まとめ

設置するだけで、コードなど変えなくても実装可能なので便利です!
また、自分好みに変更を加えれば、より良いものになりそうです!

参考サイト

https://www.weblab.co.jp/staff/creator/7914.html




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

kawasaki

kawasaki

webデザイナー、まだまだ勉強中です…