Blog

HTML上にPDFを表示させる方法

2015.10.13Cat:jQueryプラグイン

ECサイト上の商品などで、PDFのパンフレットをアップし

そのままサイト上でサムネイル画像を表示したいといった類の依頼が2件ほどあった。

少し興味があったので調べてみた結果、方法としては3つほどあることがわかった

 

1. Jqueryプラグイン

デモ

pdfSliderというのをつかったのだが、若干用途が違うようで

スライダーとしては優秀っぽいのだが、サムネイルとしては機能しないようだ。

他のプラグインも探したのだが、自分が見つけられたのはこの類だった

 

一応このプラグインの設置方法を紹介

jQuery、pdfSlider.css、pdfSlider.jsを読み込み、

■HTML

 

■JS

と記述する。

 

オプションなどの容易はあまりないようで、

ターゲットとなる要素の中に必ずobjectタグを設置しdata、type、data-captionを記述する仕様のようだ

 

2. embedタグ

デモ

すごく良い感じ。調べたところブラウザもメジャーなものは大丈夫そう。

ただ、スクロールバーがどうやっても消えないのと、当たり前だがAcrobat readerが入っていないと動かない。

ちなみにソースはこれだけ

 

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

hoshino
ECのことを中心に書きたいと思います。 ネタが無いときはプログラムやデザインのことも書きます。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ