Menu
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.
687
Using an iframe tag is the second way to embed a pdf file in an HTML web page. In web development, web developers use the iframe tag to embed files in various formats and even other websites within a web page. Due to its wide compatibility, the iframe tag is widely used for embedding pdf.
All you need to do is add #view=fitH to the end of the source attribute. That's it! fitH stands for fit horizontal, and this will make the PDF in our iframe fit the width of the screen.
The easiest way to put PDF in an HTML document is using the <a> tag with its href attribute. You need to add the URL or the reference link of your PDF file to the element.
Making a PDF non-downloadable is as simple as adding #toolbar=0 to the URL.
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
