「PDF.js」とは
ブラウザでPDFを表示したことがあると思います。
その際にPDFはブラウザ毎に準備されているツールで表示されることになります。
しかし
その際に印刷ボタンは出したくないとか、ダウンロードは表示したくないなど、ブラウザ標準の状態ではカスタマイズすることはできません。
そこでWEBサイト側でPDFビューワを準備してしまい、ブラウザ依存はなしで行こうというわけです。
そんな機能を実現するのがJavascriptで動作するPDFビューワ「PDF.js」です。
「PDF.js」はfirefoxの標準PDFビューワとして採用されているため、信頼性は高いツールとなります。
このツールの便利な処は
WEBサイトにおいて呼び出すだけという至ってシンプルな利用方法です、Javascriptで動作するためサーバー環境などの動作条件もありません。
入手方法
ブラウザ上でJavascript動作のビューワです、サーバーの環境依存は無しですので一番最新を取得して利用してください。
ダウンロードはこちらから「https://mozilla.github.io/pdf.js/getting_started/#download」
今回は「pdfjs-2.6.347-dist.zip」でした。
設定方法
設定はいたって簡単、
①ダウンロードしたファイルを解凍
今回「pdfjs-2.6.347-dist.zip」→解凍→「pdfjs-2.6.347-dist」フォルダに
フォルダは「pdfjs」など短い名前が便利なのでリネームしました。
今回はフォルダ名は「pdfjs」を利用
②WEBサーバーに配置
今回はこちらのブログのサーバーに配置しました。
ホームページ「/public_html/」直下に配置「/public_html/pdfjs」こんな感じで配置です。
「pdfjs」フォルダ内は
├── build/
│ ├── pdf.js – display layer
│ ├── pdf.js.map – display layer’s source map
│ ├── pdf.worker.js – core layer
│ └── pdf.worker.js.map – core layer’s source map
├── web/
│ ├── cmaps/ – character maps (required by core)
│ ├── compressed.tracemonkey-pldi-09.pdf – PDF file for testing purposes
│ ├── debugger.js – helpful debugging features
│ ├── images/ – images for the viewer and annotation icons
│ ├── locale/ – translation files
│ ├── viewer.css – viewer style sheet
│ ├── viewer.html – viewer layout
│ ├── viewer.js – viewer layer
│ └── viewer.js.map – viewer layer’s source map
└── LICENSE
③呼び出し
「viewer.html」を呼び出すだけで利用が出来ます。
「http://csv.pa.land.to/pdfjs/web/viewer.html」をブラウザで表示すると、利用方法についてのPDFが表示されます。
PFDビューワとして利用する場合は
「http://csv.pa.land.to/pdfjs/web/viewer.html?file=ファイルURL」
viewer.htmlと同一階層にPDFが存在する場合は
「http://csv.pa.land.to/pdfjs/web/viewer.html?file=ファイル名」
今回はサンプルPDF(sample.pdf)をviewer.htmlと同一階層に準備して作業を進めます。
利用事例
まずviewer.htmlをiframeで表示してみます。
url直打ちでブラウザで開いても同じになります。
コードは以下
<iframe src=”http://csv.pa.land.to/pdfjs/web/viewer.html” width=”390px” height=”540px”></iframe>
利用案内のPDFがデフォルト表示になります。
次にsample.pdfを表示します。
URLパラメターでfileを指定します。
viewer.htmlと同一階層ならファイル名のみでOK
<iframe src=”http://csv.pa.land.to/pdfjs/web/viewer.html?file=sample.pdf” width=”390px” height=”540px”></iframe>
次にsample.pdfをURL指定で表示します。
<iframe src=”http://csv.pa.land.to/pdfjs/web/viewer.html?file=http://csv.pa.land.to/pdfjs/web/sample.pdf” width=”390px” height=”540px”></iframe>
次にPDFビューワのツール>>マークなどを非表示にします
「viewer.html」のHTMLタグに[style="display: none;"]などスタイルを入れれば非表示に!
または
付属のCSS「viewer.css」へ設定を行い非表示に
ソースがいるがWEB内にあるのでかなり自由度は高いレイアウトが出来ます。