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>
以上。
- カテゴリー
- サポート