2015/10/14
HTML上にPDFを表示させる方法
ECサイト上の商品などで、PDFのパンフレットをアップし
そのままサイト上でサムネイル画像を表示したいといった類の依頼が2件ほどあった。
少し興味があったので調べてみた結果、方法としては3つほどあることがわかった
1. Jqueryプラグイン
pdfSliderというのをつかったのだが、若干用途が違うようで
スライダーとしては優秀っぽいのだが、サムネイルとしては機能しないようだ。
他のプラグインも探したのだが、自分が見つけられたのはこの類だった
一応このプラグインの設置方法を紹介
jQuery、pdfSlider.css、pdfSlider.jsを読み込み、
■HTML
|
1 2 3 | <div id="carousel"> <object data="pdf/JISrirekisho.pdf" type="application/pdf" data-caption="original"></object> </div> |
■JS
|
1 2 3 4 5 | <script type="text/javascript"> $(function($) { $("#carousel").pdfSlider(); }); </script> |
と記述する。
オプションなどの容易はあまりないようで、
ターゲットとなる要素の中に必ずobjectタグを設置しdata、type、data-captionを記述する仕様のようだ
2. embedタグ
すごく良い感じ。調べたところブラウザもメジャーなものは大丈夫そう。
ただ、スクロールバーがどうやっても消えないのと、当たり前だがAcrobat readerが入っていないと動かない。
ちなみにソースはこれだけ
|
1 | <embed type="application/pdf" src="pdf/JISrirekisho.pdf" style="width: 200px; height: 100px; overflow: hidden;"> |
3. Google Docs
最後はこちら。
http://docs.google.com/gview?url={URL}&embedded=true
{URL}の部分にPDFのURLを指定し、iframeなどで読み込むだけ。
iframeに対してかけたCSSは基本的に反映される模様
結論としては、PDFは画像として使用するために作られていないので
サムネイルなどはちゃんと別で作るのがベスト。
ただ、ECの用に多数の商品をアップしなければならない時は、
専用のサーバーサイドのプログラムをつくるか、それができなければembedかをGoogle Docs使うのが良さそう
Author Profile
SHARE
