PDFs can be embedded into HTML pages without JavaScript. Below are four examples of the most common techniques.

Note: these examples work in all modern desktop browsers, but results will vary in older desktop browsers and mobile browsers. As of iOS 9, none of these examples work properly in Safari for iOS.

<object>

Using an <object> enables you to leave fallback content if the browser doesn’t support PDF embedding.

Code

(In Preview, height = "100%" has revised as height = "960px" for a full single page)

<object width="100%" height="100%" data="/blog/pdf/sample.pdf#page=2" type="application/pdf">
</object>


<embed>

Using an <embed> approach is widely supported, but not everywhere. Unfortunately, <embed> doesn’t provide a mechanism for fallback content. If the browser doesn’t support PDF embedding, the end-user sees nothing.

Code

<embed width="100%" height="100%" src="/blog/pdf/sample.pdf#page=2" type="application/pdf">


<iframe>

The <iframe> approach is widely supported.

Code

<iframe width="100%" height="100%" src="/blog/pdf/sample.pdf#page=2">
</iframe>


<object><iframe></object>

Using an <object> with an <iframe> fallback will reach the most users.

Code

<object width="100%" height="100%" data="/blog/pdf/sample.pdf#page=2" type="application/pdf">
<iframe width="100%" height="100%" src="/blog/pdf/sample.pdf#page=2" style="border: none;">