Embed PDF at full height

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.

Answers:

Answer

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; }
Answer

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

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

Answer

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

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

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.

Answer

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.