だれかのなにかに役立てるウェブ制作者YoTaの趣味ブログ

pdfファイルをスマホ・レスポンシブ対応でプレビュー表示させるiframeをHTMLに埋め込む方法

ウェブサイトにpdfをiframeで埋め込もうとすると、パソコンでは表示されても、スマホではうまく表示されません。ただ、Googleドキュメントのpdf埋め込みビューを使えば、ちょこっとソースコードのURLを貼り替えるだけで、スマホでも表示可能なレスポンシブ対応がお手軽に実装できてしまいます。

作業は1分もいりません。さっそく使い方を見てみましょう!

pdfファイルをスマホ・レスポンシブ対応でHTMLにiframeで埋め込む方法は「Google Document Viewer」!

Google Document Viewerを使うことで、Googleドライブにファイルをアップロードしなくても、iframeにURLを書くだけで、簡単にレスポンシブ表示できます。

試しに自分がサンプル用に作成した本ブログのワイヤーフレームをpdfで埋め込んでみました。

Google Document Viewerによるpdf表示(レスポンシブ)

上記プレビュー画面のソースコードはこちら。

<iframe src="https://docs.google.com/gview?url=https://my-terrace.com/***(省略)***/wf_sample.pdf&embedded=true" style="width:100%; height:500px;" frameborder="0"></iframe>

「https://my-terrace.com/***(省略)***/wf_sample.pdf」の部分を、自分の表示したいpdfが保存されているURLに張り替えるだけでOKです!あとはウェブサイトのレイアウトに合わせて、styleを調整するだけです!

注意点

たとえば上記の場合、Googleが「https://my-terrace.com/***(省略)***/wf_sample.pdf」のURLを読み込めないと、当たり前ですが表示されません。つまり、basic認証や特定のアクセス拒否設定をしていると表示されませんので注意しましょう。

まとめ

いかがでしたでしょうか。pdfをレスポンシブで埋め込みしたい方は、ぜひ参考にしてみてください!

2018/02/15追記 「URLはhttpsにしてください!!」

久しぶりにGoogle Document Viewerを使おうと思ったら反映されず、なんでだろうと思って調べてみたら、なんと、Google Document ViewerがhttpsのSSL対応になっていました。なので、iframeの中で、下記のようにする必要があります。

誤り
src="https://docs.google.com/~

修正後
src="https://docs.google.com/~

というわけで、Google Document Viewerでpdfが開かないんですけどぉぉぉぉぉッッッッッ!!って時は、URLを見直してみてください!

ページ上部に戻る