web ページで pdf ファイルを表示する方法のメモ。
pdf.js を使うことで、web ページで pdf ファイルを表示することができます。
まず、pdf.js をダウンロードして web サーバ上に置きます。
pdf.js の入手先はこちら。
ここでは、以下のようなファイル構成とします。
pdf.js による pdf 表示のシンプルな html は以下のようになります。
iframe の src には pdf.js 内の viewer.html を読み込み、file パラメータで pdf ファイル名を指定します。
表示するページを javascript で制御することも可能です。
以下のように iframe の src に指定したURLに #page= でページ番号を指定することで、
リンクをクリックすると指定のページに遷移することができます。
例えば 3 ページに遷移する場合には、以下のように iframe の src を変更します。
pdf.js を使うことで、web ページで pdf ファイルを表示することができます。
まず、pdf.js をダウンロードして web サーバ上に置きます。
pdf.js の入手先はこちら。
ここでは、以下のようなファイル構成とします。
www ├── data │ └── pdf │ └── sample.pdf # 表示する PDF ファイル ├── pdfjs # pdf.js │ ├── build │ ├── LICENSE │ └── web └── test └── test_viewer1.html # テスト用の web ページの html ファイル
pdf.js による pdf 表示のシンプルな html は以下のようになります。
iframe の src には pdf.js 内の viewer.html を読み込み、file パラメータで pdf ファイル名を指定します。
<html> <head> <title>test viewer</title> </head> <body> <iframe id="pdf_viewer" width="800" height="600" src="/www/pdfjs/web/viewer.html?file=/www/data/pdf/sample.pdf"> </iframe> </body> </html>
表示するページを javascript で制御することも可能です。
以下のように iframe の src に指定したURLに #page= でページ番号を指定することで、
リンクをクリックすると指定のページに遷移することができます。
例えば 3 ページに遷移する場合には、以下のように iframe の src を変更します。
document.getElementById('pdf_viewer').setAttribute('src', '/www/pdfjs/web/viewer.html?file=/www/data/pdf/sample.pdf#page=3');