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

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つになりそうです。

以上です。

HTML/CSSカテゴリの最新記事