PDFObject has been updated to version 1.2, and now supports Internet Explorer 9. It is also now available on GitHub.

PDFObject is an easy-to-use method for dynamically embedding PDF files into HTML documents. It uses JavaScript to generate and inject a standards-friendly <object> element into your HTML file. The PDFObject JavaScript file weighs in at a svelte 2.9KB 1.9KB.

Before diving into PDFObject, you should first ask yourself: is a JavaScript-based solution what I really need? PDFObject may be overkill for your situation. No worries, this site provides helpful information and tools to help you embed your PDF file, whether you choose to do it dynamically using PDFObject or with pure HTML markup. Read on.

When possible, use standardized HTML markup and avoid JavaScript

In an ideal world, you would always embed your PDF files using an <object> element hard-coded in your HTML markup. Why? For starters, avoiding JavaScript usually means greater accessibility, greater searchability (important for those concerned with search engine optimization), and fewer browser compatibility issues. Since no JavaScript is being used, standardized markup is also quicker to load and less of a drain on computer and network resources.

Click here to learn more about embedding PDFs using standardized HTML markup.

Sometimes you need a little JavaScript. When you do, try PDFObject.

Some projects will require dynamically embedded PDFs. PDFObject was designed for this purpose, and makes embedding PDFs quick and easy while maintaining a healthy respect for standards.

PDFObject uses JavaScript to generate the same standards-compliant <object> markup you would normally write yourself, then inserts the <object> into your HTML element of choice. You can fill the entire browser window, or insert the PDF into a <div> or other block-level element.

Here's a very simple no-frills example of PDFObject; this example will make the PDF fill the entire browser window:

<html>
  <head>
    <title>PDFObject example</title>
    <script type="text/javascript" src="pdfobject.js"></script>
    <script type="text/javascript">
      window.onload = function (){
        var success = new PDFObject({ url: "sample.pdf" }).embed();
      };
    </script>
</head> <body> <p>It appears you don't have Adobe Reader or PDF support in this web browser. <a href="sample.pdf">Click here to download the PDF</a></p> </body> </html>

Embedding a PDF can't get much easier! There are also many other embed options available; visit the code generator to see what's possible.

Features

Compatibility

Please note this compatibility chart has not been updated to reflect PDFObject 1.2.

PDFObject is compatible with every major browser capable of displaying PDFs. Please note these results are from internal testing of PDFObject using Adobe Reader; no open-source PDF browser plugins were used during testing.

  Windows XP
(Professional)
Windows Vista
(Business)
Mac OS X 10.5
(Leopard)
Ubuntu 8.04
(Hardy Heron)
Internet Explorer 6 X not applicable not applicable not applicable
Internet Explorer 7 X X not applicable not applicable
Mozilla Firefox 3 X X no Adobe Reader plugin X
Apple Safari 3.1 X X X not applicable
Opera 9.5 X X no Adobe Reader plugin X

not applicable: Specified browser is not produced for this operating system.
no Adobe Reader plugin: Adobe Reader unavailable for this browser/OS combination.

Syntax

PDFObject's syntax will feel very familiar to users of JavaScript frameworks such as jQuery and MooTools. Here's a typical example:

var myPDF = new PDFObject({
  url: "sample.pdf",
  id: "myPDF",
  width: "500px",
  height: "300px",
  pdfOpenParams: {
    navpanes: 1,
    statusbar: 0,
    view: "FitH",
    pagemode: "thumbs"
  }
}).embed("mydiv");

Here's another example:

var myParams = { 
  url: "sample.pdf",
  pdfOpenParams: { view: "FitV" }
};

var myPDF = new PDFObject(myParams).embed("mydiv"); //returns reference to new HTML <object>

Note that embed is chained on to the new PDFObject statement. You can also use them separately:

var myParams = { 
  url: "sample.pdf",
  pdfOpenParams: { view: "FitV" }
};

var myPDF = new PDFObject(myParams);  //returns reference to JavaScript object

myPDF.embed("mydiv");  //returns reference to new HTML <object>

Properties and methods

PDFObject contains the following properties and methods.

Name Type Description
PDFObject(obj)
constructor

Use an object for passing arguments. obj can contain the following arguments:

  • url (string, required)
  • id (string)
  • width (string, with unit of measurement such as "100%" or "500px")
  • height (string, with unit of measurement such as "100%" or "500px")
  • pdfOpenParams (object, may contain any of the PDF Open properties specified by Adobe)

Returns reference to self (this).

PDFObject.embed(targetID) method Embeds PDF. Returns HTML <object> element or false if embed not successful.
PDFObject.get(prop) method

Returns value of property. If property is not found or has no value, returns null. Available properties:

  • url (string)
  • id (string)
  • width (string)
  • height (string)
  • pdfOpenParams (object)
  • pluginTypeFound (string)
  • pdfobjectversion (string)
pipwerks.pdfUTILS.detect.hasReader() support function Returns boolean indicating whether navigator.plugins version of Adobe Reader has been found.
pipwerks.pdfUTILS.detect.hasReaderActiveX() support function Returns boolean indicating whether ActiveX version of Adobe Reader has been found.
pipwerks.pdfUTILS.detect.hasGeneric() support function Returns boolean indicating whether application/pdf mime type is supported via navigator.mimeTypes
pipwerks.pdfUTILS.detect.pluginFound() support function Returns string "Adobe" or "generic". Returns null if none found.
pipwerks.pdfUTILS.setCssForFullWindowPdf() support function sets the following style properties:

html.style.height = "100%";
html.style.overflow = "hidden";
body.style.margin = 0;
body.style.padding = 0;
body.style.height = "100%";
body.style.overflow = "hidden";


These properties need to be set in order to remove margins/padding in the document, and to enable the object to stretch to 100% vertically.
pipwerks.pdfUTILS.buildQueryString(pdfOpenParams) support function Takes properties of pdfOpenParams object and 'stringifies' them.
pipwerks.pdfUTILS.termFound(strToSearch, term) support function Returns boolean
shortcut for strToSearch.indexOf("term") !== -1

Known issues

PDFObject has no known issues at this time. The biggest issue you may face is browser support for Adobe Reader and/or funky behavior in Reader. This is beyond the scope of this simple embed script. Shortcomings encountered with Reader during testing included:

Important note: PDFObject does NOT include version detection

PDFObject does not allow you to target a specific version of Adobe Reader, such as version 7 and higher. While version detection is possible, it is a very cumbersome task and nearly impossible to maintain or make future-proof, largely due to Adobe frequently changing the plugin's name and description. For instance, in Safari, Adobe Reader 8.1's name is reported as "Adobe Acrobat and Reader Plug-in," while the name in the Windows version of Firefox is "Adobe PDF Plug-In For Firefox and Netscape." Until version reporting is consistent in Adobe Reader (across browsers and operating systems), PDFObject will not include version detection.

Tip of the cap

PDFObject was built using information, code, tools, or inspiration provided by others, including (in no particular order):

Thanks, guys!