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?

score 94 · Accepted Answer · edited May 28 '15 at 08:16

94

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

edited May 28 '15 at 08:16

Wilt

41,477
12
152
203

answered Jul 04 '10 at 12:10

Ron Knee

972
7
3

2

Code:

– Matthijs Bierman Oct 29 '10 at 11:14
The original link to the 2007 thread no longer works; here is an updated URL: https://forum.webdeveloper.com/d/152923-pdf-within-a-div Alternatively, here is an archived copy of the original link: https://web.archive.org/web/20120217224525if_/http://www.webdeveloper.com/forum/showthread.php?t=152923 – Deven T. Corzine Feb 24 '22 at 19:57

score 24 · Answer 2 · answered Sep 10 '18 at 15:43

24

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>

answered Sep 10 '18 at 15:43

Sudhir Bhapkar

931
8
7

score 2 · Answer 3 · answered Apr 29 '10 at 19:51

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.

score 2 · Answer 4 · answered May 31 '17 at 05:48

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.

score 1 · Answer 5 · answered Jul 14 '16 at 05:13

1

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.

answered Jul 14 '16 at 05:13

vishwas kadam

11
1

score -1 · Answer 6 · answered Apr 29 '10 at 19:58

-1

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/

answered Apr 29 '10 at 19:58

Bala R

107,317
23
199
210

score -1 · Answer 7 · answered Apr 29 '10 at 21:37

may be you can do by using AJAX or jquery...
just send that file url on one page and then open like normally open pdf file in that page and use ajax.

1)so as soon as user will click on the button. then u call that function in which u above tast. So by this way there will be only one page and by that you can show as many pdf without refreshing page.

2) if u don't have many pdf and if u don't know then just upload that file on google docs and then just put the share link file....and then just use ajax or jquery.

i prefer jquery if u don't have use AJAX.

score -3 · Answer 8 · answered Apr 29 '10 at 21:13

You cannot, and here is the simple answer.

Every media asset poured into the browser is identified by a mime type name. A browser then makes processing determinations upon that mime type name. If it is image/gif or image/jpeg the browser processes the asset as an image. If it is text/css or text/javascript it is processed as a code asset unless the asset is addressed independent of HTML. PDF is identified as application/pdf. When browsers see application/pdf they immediately switch processing to a plugin software capable of processing that media type. If you attempt to push media of type application/pdf into a div the browser will likely throw an error to the user. Typically files of type application/pdf are linked to directly so that the processing software an intercept the request and process the media independent of the browser.

Always a bad idea to say "cannot", as someone will immediately come along and show an alternative (such as @Ron Knee) :) — iCollect.it Ltd, Jun 26 '15 at 16:46
Those who believe some action is impossible should stay out of the way of those who are doing it. — UncaAlby, Mar 18 '16 at 20:49

score -4 · Answer 9 · answered Apr 29 '10 at 19:50

-4

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

answered Apr 29 '10 at 19:50

Diodeus - James MacFarlane

112,730
33
157
176

Display Adobe pdf inside a div

9 Answers9

Linked