小粋空間  -  a cheap joke and a play on words site

ウェブページにPDFを直接表示する方法

ウェブページにPDFを直接表示する方法を紹介します。

１．はじめに

PDFをブラウザで表示するには、単純にPDFファイルのURLを記述すればOKです。

ウェブページにそのURLをリンクとして記述すれば、ウェブページからの閲覧も可能です。

が、PDFファイルを直接ウェブページに表示したいこともあると思いますが、その方法が分かりません。

ということで、ウェブページにPDFを直接表示する方法を紹介します。

２．ウェブページにPDFを直接表示する

ウェブページにPDFを直接表示するには、PDF.jsを利用します。

PDF.jsのページにアクセスして「Download」をクリック。

ダウンロードした「pdfjs-1.4.20-dist.zip（2016年7月時点のバージョン）」を展開します。

展開した中にあるbuildフォルダとwebフォルダをすべてアップロードします。

そしてHTML（index.html）に、PDF表示のための次のiframe要素を記述します。

index.htmlと同じディレクトリにbuildフォルダとwebフォルダ、そしてPDF（ここではsample.pdf）が配置されている場合、次のように記述します。

<iframe src="./web/viewer.html?file=./sample.pdf"></iframe>

viewer.htmlはwebフォルダに含まれるPDFを表示するためのファイルで、pdf.jsのインクルード以外に色々なものが予め設定されています。

冒頭のPDF表示では次のstyle属性を追加しています。

<iframe style="width:400px;height:550px" src="./web/viewer.html?file=./sample.pdf"></iframe>

viewew.htmlのオプションはいろいろ用意されていますが、別エントリーで紹介したいと思います。