PDF documents are used all across the internet. Be it an invoice from an online shop or a sales agreement, PDF is everywhere. One of the main arguments for using PDF as opposed to word processor files is the fact that the PDF file format is rendered exactly the same no matter the device. This trait is useful especially on the web, where getting something to look the same on different browsers is not always easy.
Embed PDF in HTML with
1 2 3 4 5 6 7 8
<object data="https://example.com/test.pdf#page=2" type="application/pdf" width="100%" height="100%"> <p>Your browser does not support PDFs. <a href="https://example.com/test.pdf">Download the PDF</a>.</p> </object>
<object> is not available in every browser, this method is often combined with the
<iframe> HTML element to reach the most users. To do this, the fallback area of the
<object> is used to host an
<iframe>. Similar to the
<object> element, the content of an
<iframe> — in our case, this would be the
<p> tag with its content — is only shown when the browser does not support PDFs via the
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<object data="https://example.com/test.pdf#page=2" type="application/pdf" width="100%" height="100%"> <iframe src="https://example.com/test.pdf#page=2" width="100%" height="100%" style="border: none;"> <p>Your browser does not support PDFs. <a href="https://example.com/test.pdf">Download the PDF</a>.</p> </iframe> </object>
If you’re curious how the above PDF will be rendered in your browser, check out the following example integration:
Problems with This Approach
This approach of displaying PDF documents is fast and requires no programming. There are, however, certain downsides:
A browser could use whichever PDF reader is installed on a system, and there is no API that would allow you to customize the reader’s look and feel. In other words, the UI used when loading a PDF via an
<object>is completely outside of your control.
It is not guaranteed that every browser will implement a PDF view via
<iframe>. For example, certain versions of Internet Explorer will require your users to install Adobe Reader to support rendering a PDF via
<object>, whereas other browsers might not support it at all.
There’s only a very limited set of API methods. In fact, if you look closely at the
srcproperties in the above examples, you can see we’ve appended
#page=2to the URLs. This allows you to control the page that is shown. If you’re looking for a complete reference of parameters, check out the “Parameters for Opening PDF Files” specification published by Adobe in 2007. Unfortunately, supporting those parameters is not required and thus there is no guarantee that this flag really works (as an example, while writing this we noticed that Safari 11 does not seem to honor any of those properties).
For use cases that require support for every browser, customization, or some of the more advanced PDF features like annotation, PDF forms, and more, we recommend you look into more feature-complete products like PSPDFKit for Web.