LoginSignup
19
20

More than 5 years have passed since last update.

railsプロジェクト内でpdfファイルを表示する方法

Posted at

前提

  • 既存のpdfファイルをrailsプロジェクト内で表示したいとき

方法

  • objectタグ
  • embedタグ
  • iframeタグ
  • link_to

objectタグ

使用方法

html.erb
<object data="pdfファイルのURL" type="application/pdf" width="" height=""></object>

属性

  • data : pdfファイルのURLを入力する必要がある。例えばassets以下にいれた場合、image_url("")などを使って、ファイルの位置をURL化し挿入する。参考: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html
  • type : ソースのMIMEタイプを定義する。しかし、dataとtype両方書く必要はなく、dataだけあれば、とりあえず表示される。
  • width : ファイルの横幅を定義する
  • height : ファイルの縦幅を定義する

その他の属性はこちらを見てください。
http://www.htmq.com/html5/object.shtml

注意点

  • PC上ではこの方法でうまく表示されますが、スマホ(iPhone/Android)で見る場合は、最初の1ページのみにしか表示されないようです。筆者が調べたところによると、これはどうしようもないみたいです。

embedタグ

使用方法

html.erb
<embed src="" type="application/pdf" width="" height=""></embed>

属性

  • src : pdfファイルの位置を定義
  • type : ソースのMIMEタイプを定義
  • width : ファイルの横幅を定義する
  • height : ファイルの縦幅を定義する

その他の属性はこちらを見てください。
http://www.htmq.com/html5/embed.shtml

注意点

  • objectタグとの異なる点としては、objectタグはIEで表示されないが、embedではIEでも表示することが可能
  • またobjectタグ同様PC上でのみpdfファイルの参照が可能となる。

iframeタグ

使用方法

html.erb
<iframe src="" width="" height="" ></iframe>

属性

  • src : pdfファイルの位置を定義
  • width : ファイルの横幅を定義する
  • height : ファイルの縦幅を定義する

注意点

  • こちらもPCのみ。理由は同じです。

link_to

使用方法

あまりに有名なので割愛。
もしわからない方がいらっしゃったら以下のページを参照してください。
http://railsdoc.com/references/link_to

唯一スマホでもpdfファイルを見ることができる!

  • ただし、内部への埋め込み表示ではなく、pdfファイルの中身に飛んでいるだけなので、どうしても内部表示じゃないといけない方にとっては使えないが、railsアプリ内で既存のpdfファイルを開ければ良いという人にとっては、これで満たされるとおもいます。
19
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
20