Embed PDF at full height

Question

My question ... is it possible to embed a PDF in a HTML document where the height is always 100%. The problem is the actual height of the pdf could vary and the layout needs to respond to this.

How are you embedding the pdf document? – onetwo12 Sep 10 '14 at 13:15 — onetwo12, Sep 10 '14 at 13:15

tosc · Answer 1 · 2014-09-10T13:48:53.203

22

There are several ways to embed PDF in HTML.

One would be to use PDFObject. The below example works out of the box in firefox, you'll find further instructions for most browsers on their website.

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
    <p>It appears you don't have a PDF plugin for this browser.
    No biggie... you can <a href="myfile.pdf">click here to
    download the PDF file.</a></p>
</object>

Or you could use the google drive viewer to display any PDF (and quite a few more file types):

<iframe src="http://docs.google.com/viewer?url=[http://PATH-TO-YOUR-FILE.pdf]&embedded=true" width="600" height="780" style="border: none;"></iframe>

Using the drive viewer your visitors don't need any additional software/plugin to view the files.

You can then adjust the height of the PDF container with css. i.e

#yourcontainer { height: 100vh; }

edited Sep 10 '14 at 13:48

answered Sep 10 '14 at 13:34

tosc

759
4
16

1

I can get this method to use the full height. Anyone got it working? Otherwise great respons! – cholewa1992 Jan 14 '16 at 20:34
@cholewa1992 You mean "I can't get this method to use full height"? – Ifedi Okonkwo Jul 08 '16 at 17:24
@IfediOkonkwo yes, sorry. That was what I ment – cholewa1992 Jul 09 '16 at 18:29
@cholewa1992 add this to the page's css: html, body { height: 100%; } – TSga Feb 27 '18 at 21:06

score 17 · Answer 2 · answered Apr 09 '19 at 23:47

17

None of the above answers worked for me. The following worked across every platform I needed it to (ie, I didn't test IE).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <object data="pdf.pdf" type="application/pdf" style="min-height:100vh;width:100%"></object>
  </body>
</html>

answered Apr 09 '19 at 23:47

tooluser

1,481
15
21

how did you make this so easy where everything else is not - thank you – J-Dizzle May 22 '22 at 15:46
1

update body to `` to removet he annoying margin – Thomas Luechtefeld Jun 14 '22 at 16:01

score 5 · Answer 3 · answered Sep 10 '14 at 13:42

5

You must to set width\height a container

<div style="width: 100%; height: 100%">
<embed id="frPDF" height="100%" width="100%" src="http://eurecaproject.eu/files/5013/9885/7113/example4.pdf"></embed>
</div>

Look example

answered Sep 10 '14 at 13:42

Igor Semin

2,486
1
20
21

Thank you this helped. I am using a library openHtmlToPdf, it was not considering image tag's height or css height attribute. Finaly your solution helped. Thanks a lot – Satish Patro May 21 '21 at 14:07

score 4 · Answer 4 · answered Dec 19 '19 at 10:24

body {
    margin: 0;            /* Reset default margin */
}

iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}

<iframe src="http://docs.google.com/viewer?url=[http://PATH-TO-YOUR-FILE.pdf]&embedded=true" width="600" height="780" style="border: none;"></iframe>

score 0 · Answer 5 · edited May 23 '17 at 10:31

0

Make sure you use <object> - EMBED vs. OBJECT

<object data="file.pdf" type="application/pdf" width="100%" height="100%"></object>

edited May 23 '17 at 10:31

Community

1
1

answered Sep 10 '14 at 13:54

Tom Rudge

3,188
8
52
94

1

Worth noting that this isn't strictly true with HTML5 - the `` tag is part of [the official standard](https://www.w3.org/TR/html5/embedded-content-0.html#the-embed-element). – Tieson T. Jul 27 '17 at 20:48

score 0 · Answer 6 · answered Jun 01 '19 at 23:14

I like the functionality that comes with the html objects for PDFs as opposed to some libraries like PDF.js for light projects. This is definitely not the best answer but I'm currently using JQuery with Bootstrap in an Angular 6 app so I modify height after the the view loads.

I set

        <object id="pdf" data="path.pdf" type="application/pdf" width="100%"></object>

then in my component I adjust the height based on the ratio of the width to height. For example, an 8 x 11.5 document would give the height 1.4375 x the width.

  ngAfterViewInit(): void {
    var width = $("#pdf").width();
    $("#pdf").prop("height", width * 1.4375 + "px");
   }

Saw this post and figured I would post. Hope this helps and please correct me if you think this is bad coding practices.

Embed PDF at full height

6 Answers6

Linked