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?

Solution 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.)

Solution 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>

Solution 3

We use this on our website

http://issuu.com/smartlook

Its a very customizable to display PDF's directly in your browser. It basically hosts the PDF in a flash object if you are not opposed to that sort of thing.

Here is a sample from our corporate website.

Solution 4

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.

Solution 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.

View more solutions

Comments

[Matthijs Bierman]

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

[Deven T. Corzine]

The original link to the 2007 thread no longer works; here is an updated URL: forum.webdeveloper.com/d/152923-pdf-within-a-div Alternatively, here is an archived copy of the original link: web.archive.org/web/20120217224525if_/http://…