PDFをウェブページ内に埋め込んで表示させる方法 Google Docs Viewer
ウェブページにPDFリンクを記載した場合、リンクをクロックするとファイルのダウンロードが開始したり、PDFビューワーが起動して別のページに表示されたりします。
PDFファイルを画像ファイルと同様にページ内に埋め込んで表示する方法があります。
Google Docs Viewer #
Google Docs Viewer を利用してPDFファイルを埋め込み表示させる。
Google Docs Viewer は下記ファイル形式にも対応しています。
一般的なファイル
- アーカイブ ファイル（.ZIP、.RAR、tar、gzip）
- オーディオ形式（MP3、MPEG、WAV、.ogg、.opus）
- 画像ファイル（.JPEG、.PNG、.GIF、.BMP、.TIFF、.SVG）
- マークアップ、コード（.CSS、.HTML、.PHP、.C、.CPP、.H、.HPP、.JS、.java、.py）
- テキスト ファイル（.TXT）
- 動画ファイル（WebM、.MPEG4、.3GPP、.MOV、.AVI、.MPEGPS、.WMV、.FLV、.ogg）
Adobe ファイル
- Autodesk AutoCad（.DXF）
- Illustrator（.AI）
- Photoshop（.PSD）
- Portable Document Format（.PDF）
- PostScript（.EPS、.PS）
- Scalable Vector Graphics（.SVG）
- Tagged Image File Format（.TIFF） – RGB .TIFF 画像で最適
- TrueType（.TTF）
Microsoft ファイル
- Excel（.XLS、.XLSX）
- PowerPoint（.PPT、.PPTX）
- Word（.DOC、.DOCX）
- XML Paper Specification（.XPS）
- パスワードで保護された Microsoft Office ファイル
Apple ファイル
- エディタ ファイル（.key、.numbers）
Google Doc Viewer のリンクにパラメータとして埋め込む。 #
(https://docs.google.com/viewer?url=%5BPDFファイルのURL%5D&embedded=true)
PDFファイルのURLに2バイト文字が含まれる場合は予めエンコードしておきます。
作成したビューワーのURLを iframe に埋め込む #
<iframe
src=”https://docs.google.com/viewer?url=%5BPDFファイルのURL%5D&embedded=true”
width=”600″ height=”400″></iframe>
Google Doc Viewer でPFD表示例 #
元のPDFファイル
速報天気図(SPAS)
https://www.hbc.co.jp/tecweather/SPAS.pdf
iframe 記載例
<iframe style=”width: 300px; height: 300px;” src=”https://docs.google.com/gview?url=https://www.hbc.co.jp/tecweather/SPAS.pdf&embedded=true” frameborder=”0″></iframe>
以上。
