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

web制作

読了の目安時間: 155

ウェブサイトに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/wp-content/uploads/2016/02/wf_sample.pdf&embedded=true" style="width:100%; height:500px;" frameborder="0"></iframe>

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

注意点

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

まとめ

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

今読んだ記事をシェアする

pdf-thumb

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

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

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。現在、サーバー・アプリなどを習得中です。性格は、自虐好きです。