【超カンタン!】pdfファイルをスマホ・レスポンシブ対応でプレビュー表示させられるようにiframeをHTMLに埋め込む方法

web制作

※本記事は作成日より一年以上が経過しています。最新の情報ではないので、ご注意ください。

読了の目安時間: 150

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

Google先生、どこまでも凄いっす・・・。作業は1分もいりません。さっそく使い方を見てみましょう!

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

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

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

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

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

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

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

注意点

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

まとめ

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

本記事を気に入って頂けたら、facebookの「いいね!」を是非!

【超カンタン!】pdfファイルをスマホ・レスポンシブ対応でプレビュー表示させられるようにiframeをHTMLに埋め込む方法


本記事のシェアはこちらから!

  • このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

follow us in feedly

WEB制作をやっているYoshiと申します。PVは月間10万程度。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。