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');
