とあるweb屋の仕事術

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

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

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

Webサイト、WebページでPDFを掲載したいとクライアントから要望をもらうことがよくあります。よくある要望としては以下のようなかんじ。

  • PDFをページの中にインラインで表示したい。
  • PDFをサムネイルのように表示したい。
  • PDFを記事内に埋め込みたい。
  • PDFを別ウィンドウで表示させたくない、別ページに飛ばしたくない。
  • ダウンロードではんかうページ内にコンテンツとして表示したい。

WebサイトでPDFを掲載する場合、ダウンロードさせるか、別タブ・別ウィンドウで表示させるという手法が一般的です。

ですが、前述したとおりそのページ内で表示を完結させたいというニーズはそこそこあるようです。 

 

 

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

Webページ内でPDFのインライン表示をまじめに実現しようとすると、結構な手間と労力、工数が必要になります。

PDFをサムネイルとして画像化するか、JavaScript か jQuery のプラグイン使わないと無理か?などなど...いろいろな考えがよぎります。

と、こんなかんじでまじめにやろうとするドツボにはまりそう、小難しい実装が必要になるなぁ思ってしまうわけですが、HTMLタグとCSSだけで実現できる超絶便利なPDF埋め込み方法があったのでご紹介します。  

 

 

難しい実装はいらない。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を掲載する方法は検索するといろいろでてくるのですが、実際に試してみて最適解ではなかったなというボツ案も紹介しておきます。

以下のページに掲載している方法は、だめでした。

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

 

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

 

これらの3つは、ブラウザや端末でのサポートがまちまちで、どれも実用的ではありませんでした。

 

Android端末、iPhone端末では使えなかったり、環境・端末依存が激しく、レスポンシブもできず、全端末、各種ブラウザでの動作は保証できず、現実的でないので、使えないという結論に至りました。

 

ちなみに、以下はめんどくさそうなので試してません。

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

 

--- ✂  ---

 

参考サイト

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

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

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

【超カンタン!】pdfファイルをスマホ・レスポンシブ対応でプレビュー表示させられるようにiframeをHTMLに埋め込む方法