Display Adobe pdf inside a div

Question

I have a pdf file that the user has to see and click on the \"I agree\" button. How do you display a pdf inside a div?

Answer 1

Yes you can.

See the code from the following thread from 2007: PDF within a DIV

<div>
    <object data="test.pdf" type="application/pdf" width="300" height="200">
        alt : <a href="test.pdf">test.pdf</a>
    </object>
</div>

It uses <object>, which can be styled with CSS, and so you can float them, give them borders, etc.

(In the end, I edited my pdf files to remove large borders and converted them to jpg images.)

Answer 2

Here is another way to display PDF inside Div by using Iframe like below.

<div>
  <iframe src="/pdf/test.pdf" style="width:100%;height:700px;"></iframe>
</div>
<div>
  <!-- I agree button -->
</div>

Answer 3

You can use the Javascript library PDF.JS to display a PDF inside a div. The size of the PDF can be adjusted according to the size of the div. You can also setup event handlers for moving to next / previous pages of the PDF.

You can checkout PDF.JS Tutorial - How to display a PDF with Javascript to see how PDF.JS can be integrated in your HTML code.

Answer 4

You could create an image thumbnail, and link it to the actual pdf as an inline popup using something like http://orangoo.com/labs/GreyBox/

Answer 5

I think its not working, because you z-index property not applied on pdf(any outside object). So when you add any control in PDF view boundary,its appear behind of pdf view.

Answer 6

I don't think you can. You may need to use an Iframe instead.