とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

超簡単。Webサイトのページ内でのPDF埋め込み、インライン表示、疑似サムネイル化表示の実装は「Google Docs Viewer」がおすすめ。むずかしい実装は不要!

Webサイトのページ内でのPDF埋め込み、インライン表示、疑似サムネイル化表示の実装は「Google Docs Viewer」がおすすめ。むずかしい実装は不要!超簡単。

WebページへのPDF埋め込みの要望は意外に多い

Webサイト、Webページで

PDFを掲載したいと

クライアントから要望を

もらうことがよくあります。

 

  • PDFをインラインで表示したい
  • PDFをサムネイルのように表示したい
  • PDFを埋め込みたい
  • 別ページに飛ばしたくない、ダウンロードじゃなくページ内にコンテンツとして表示したい

などなど。

ダウンロードさせるか、

別タブ、別ウィンドウで表示させるという

手法もありますが、そのページ内で

完結させたいというニーズはそこそこ

あるようです。

 

 

 

WebページへのPDF埋め込みを実現するには

で、これら実現しようとすると、

PDFをサムネイルとして

画像化する必要があるのか?

どうやってやるんだ?

JavaScript とか jQuery のプラグイン使わないと無理か?

などなど...

 

小難しい実装が必要になるなぁ

思ってしまうわけですが、

HTMLタグとCSSだけで実現できる

超絶便利なPDF埋め込み方法が

あったのでご紹介。

 

 

 

おすすめできない実装方法

さきにボツ案を紹介しておきますが、

以下のページに掲載している方法は、

HTMLタグだけで PDF を埋め込み表示する方法 - Qiita

 

  • objectタグを使う方法
  • embedタグを使う方法
  • iframeを使う方法

 

これらの3つは、

ブラウザや端末でのサポートが

まちまちで、

どれも実用的ではありませんでした。

 

Android端末、iPhone端末では

使えなかったり、

環境・端末依存が激しく、

レスポンシブもできず、

全端末、各種ブラウザでの動作は

保証できず、現実的でないので、

使えないという結論に至りました。

 

ちなみに、

以下はめんどくさそうなので

試してません。

  • concrete5 CMS
  • PDF.jsを使う方法

 

 

 

難しい実装はいらない。HTMLとCSSだけで超簡単。
Google Docs Viewer での実装。

で、代案を探していたところ、

Google Docs Viewer で

実現する方法を見つけました。

 

Google Docs Viewer で既定

されている iframe タグがあるのですが、

その iframe タグの中に表示させたいPDFへの

URLを掲載するだけです。

手順は以下のとおり、かんたんです。

 

  1. 表示したいPDFファイルのURLを用意
  2. Google Doc Viewer の iframe タグの中のパラメータにそのURLを入れる
  3. CSSでサイズを微調整(レスポンシブなども)

 

 

 

実装コードサンプル

では具体的に。

とりあえず表示するPDFは、

Adobeさんがサンプルで

公開している以下のPDFを

表示する例で紹介します。

 

Adobe の sample.pdf

https://helpx.adobe.com/jp/acrobat/kb/cq07071635/_jcr_content/main-pars/download-section/download-1/file.res/sample.pdf

 

PDFをページ内に埋め込む方法は以下です。

<iframe 
src="https://docs.google.com/viewer?url=★★★★&embedded=true" 
width="600" height="400"></iframe>
 
上記の「★★★★」のところに
表示させたいPDFのURLを
入れ込んでください。
さきほどの Adobe の sample.pdf を
いれるとこんなかんじです。 
 
 
▼DEMO
 
 

See the Pen PDF埋め込み by とあるweb屋のn太郎 (@ntoaru) on CodePen.

 

 

レスポンシブ対応は YouTube や
Googleマップの埋め込みでやる方法と
おなじです。iframeのサイズは任意に変更
して使っていただければと思います。

  

以上です。

 

めちゃくちゃ簡単、超便利。

難しい実装やJSもいらない。

コピペしてぜひご利用ください。

 

 

 

Google Docs Viewerでサポートされているファイルタイプは16種類

参考にした以下の記事によると、

PDFをページ内に埋め込んで表示するGoogle Docs Viewer(スマホ, PC) │ Web備忘録

Google Docs Viewer は

PDFファイルも含めて

16種類ものファイルタイプを

サポートしているとのことです。すげ。

引用します。

 

  • 画像ファイル (.JPEG .PNG .GIF .TIFF .BMP)
  • ビデオファイル (WebM .MPEG4 .3GPP .MOV .AVI .MPEGPS .WMV .FLV)
  • テキストファイル (.TXT)
  • マークアップ/コード (.CSS .HTML .PHP .C .CPP .H .HPP .JS)
  • Microsoft Word (.DOCおよび.DOCX)
  • Microsoft Excel (.XLSおよび.XLSX)
  • Microsoft PowerPoint (.PPTおよび.PPTX)
  • Adobe PDF (Portable Document Format)
  • アップルページ (.PAGES)
  • Adobe Illustrator (.AI)
  • Adobe Photoshop (.PSD)
  • タグ付きイメージファイル形式 (.TIFF)
  • Autodesk AutoCad (.DXF)
  • スケーラブルベクターグラフィックス (.SVG)
  • PostScript (.EPS .PS)
  • TrueType (.TTF)
  • XML用紙仕様 (.XPS)
  • アーカイブファイルタイプ (.ZIPおよび.RAR)

 

すごいですね。

PDFしか試していませんが、

いろいろと便利に使えそうです。

 

 

 

参考サイト

その他参考にした記事、貼っておきます。

PDFなどをページ内で軽快に閲覧できるGoogle Docs Viewer | スターフィールド株式会社

Googleドライブ上のPDFをブログに埋め込む方法 - My Tracking