Embed Pdf At Full Height

May 30, 2024 Post a Comment

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 res

Solution 1:

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 <ahref="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):

<iframesrc="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; }

Solution 2:

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><metacharset="utf-8" /><metaname="viewport"content="width=device-width"></head><body><objectdata="pdf.pdf"type="application/pdf"style="min-height:100vh;width:100%"></object></body></html>

Solution 3:

You must to set width\height a container

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

Look example

Solution 4:

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

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

Solution 5:

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

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

Html5 Developer