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

PDFをダウンロードせずブラウザに埋め込んで表示したい

PDFのリンクをページ埋め込んだ場合、ビューワーが起動して別ページで表示されたり、ファイルのダウンロードが発生するのが普通です。

そうではなく、ページ内のコンテンツの一部として、PDFを埋め込んで表示したいことが良くあります。

今回は、ページ内にPDFを埋め込んで表示できる Google Docs Viewer の使い方をまとめます。

Google Docs Viewer

Google Docs Viewer は、以下の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)

これらのファイルを閲覧するためのビューワーとして利用できます。全部は未確認ですが。

使い方

1. 閲覧したいファイルのURLを用意します。
   • (例: https://webbibouroku.com/wp-content/uploads/sample.pdf)
2. 用意したURLをエンコードします。
   • (https%3A%2F%2Fwebbibouroku.com%2Fwp-content%2Fuploads%2Fsample.pdf)
3. Google Doc Viewer のリンクにパラメータとして埋め込む。
   • (https://docs.google.com/viewer?url=[エンコードしたURL]&embedded=true)
   • embedded=true を指定しないと、Google風味の強い表示になってしまいます。
4. 作成したビューワーのURLを iframe に埋め込む

   <iframe 
   src="https://docs.google.com/viewer?url=[エンコードしたURL]&embedded=true" 
   width="600" height="400"></iframe>
   

3で作成したリンクを表示すると、ビューワーのページが開きます。これをコンテンツとしてページの一部に埋め込みたい場合は、4のようにiframeで埋め込むことが可能です。

ビューワーのリンク例

サンプルPDFのリンク

iframeによる埋め込み表示例

以上、お手軽にPDF文書をブラウザで表示差たり埋め込んだりする方法でした。

そのほか、PDF.js という Mozilla で開発されている PDFビューワー があるみたいです。選択肢の1つになりそうです。

以上です。