Embedding PDFs without JavaScript

Without JavaScript, a PDF can be embedded into HTML pages. Embedding PDFs without JavaScript is a major part in HTML. In below there are 4 examples that describes how to use this common techniques. For embedding a PDF file into a HTML document, this is an open-source standards-friendly JavaScript utility.

We need to know that these examples work in all modern desktop browsers. The results will vary in older desktop browsers and mobile browsers too. But, as of iOS 9, none of these examples work properly in Safari for iOS.

<object>

If the browser doesn’t support PDF embedding then, using an <object> enables you to leave fallback content.

<object data="/path/to/pdf/sample.pdf#page=4" type="application/pdf" width="100%" height="100%">
<p>This browser does not support PDFs. So, please download the PDF from <a href="/path/to/pdf/sample.pdf">Here</a></p>
</object>

<embed>

Not everywhere but, <embed> approach is widely supported for most of the browsers. This doesn’t provide any mechanism for fallback content. So, if the browser doesn’t support PDF embedding, the end-user does not see anything.

<embed src="path/to/pdf/sample.pdf#page=4" type="application/pdf" width="100%" height="100%">

Read Also: Download a HTML content as pdf using javascript

<iframe>

The <iframe> approach is widely supported for most of the browsers.

<iframe src="/path/to/pdf/sample.pdf#page=4" width="100%" height="100%">
This browser does not support PDFs. So, please download the PDF from <a href="/path/to/pdf/sample.pdf">Here</a>
</iframe>

<object><iframe></object>

You can show PDF in browser using an <object> with an <iframe> fallback.

<object data="/path/to/pdf/sample.pdf#page=4" type="application/pdf" width="100%" height="100%">
<iframe src="/path/to/pdf/sample.pdf#page=4" width="100%" height="100%" style="border: none;">
This browser does not support PDFs. So, please download the PDF from <a href="/path/to/pdf/sample.pdf">Here</a>
</iframe>
</object>