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

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に張り替えるだけでＯＫです！あとはウェブサイトのレイアウトに合わせて、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の中で、下記のようにする必要があります。

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