PDFObject

An open-source standards-friendly JavaScript utility for embedding PDF files into HTML documents.

The PDFObject utility is © 2008-2018 Philip Hutchison. Released with an MIT license. If you find PDFObject useful, please consider donating via paypal.me/pipwerks

Embedding PDFs without using JavaScript

PDFs can be embedded into HTML pages without using 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.

<embed>

The <embed> element became an official part of the HTML specification with HTML5. All HTML5-compliant browsers—all 'modern' browsers—officially support the <embed> element. Older browsers also offer surprisingly robust (though sometimes unofficial) support for <embed>. Because of its wide support, PDFObject uses JavaScript to insert <embed> elements on the page. Unfortunately, when used in static markup, the <embed> element doesn't provide a mechanism for fallback content. If the browser doesn't support PDF embedding, which still happens frequently with browsers on mobile devices, the end-user will see nothing.

Back to top

<iframe>

The <iframe> approach is very widely supported and one of the easiest ways to embed a PDF. However, an <iframe> may not provide adequate fallback content in the unlikely event that PDF rendering is not supported by the browser.

Back to top

<object>

Unlike <embed>, the <object> element enables you to leave fallback content if the browser doesn't support PDF embedding. All browsers support the <object> element, however, there are often discrepancies in how it has been implemented in each browser. Be sure to throughly test your page(s) across browsers and operating systems if you use the <object> element.

Example fallback content: This browser does not support PDFs. Please download the PDF to view it: Download PDF.

Back to top

<object><iframe></object>

Using an <object> with an <iframe> provides extra insurance if <object> is not supported.

Now that you've seen how it works with plain HTML markup, check out what's possible with JavaScript and the PDFObject utility.

Back to top