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

How to use PDFObject

Prepare the HTML file

For this example, we'll begin with a simple HTML file:

<html>
  <head>
    <title>PDFObject example</title>
  </head>
       
  <body>
  </body>
</html>

Since some users will not have a PDF plugin for their browser, we should add a link to the PDF in the body of the HTML file. Providing a link to the PDF will enable those users to download the PDF file and view it using a desktop application.

<html>
  <head>
    <title>PDFObject example</title>
  </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>

Link to the PDFObject JavaScript file

Next we'll add a link to the PDFObject JavaScript file in the document's head.

  <head>
<title>PDFObject example</title>
<script type="text/javascript" src="pdfobject.js"></script> </head>

Create an onload handler in the document's <head>

PDFObject embeds PDFs in page elements. This means you must wait until the targeted page element is available to JavaScript before invoking PDFObject. The easiest way to handle this is to wrap PDFObject's embed statement in a window.onload handler. It should look something like this:

<head>
<title>PDFObject example</title>
<script type="text/javascript" src="pdfobject.js"></script>
<script type="text/javascript">
window.onload = function (){
//Add PDFObject code here
};
</script>

</head>

You aren't forced to use onload; there are plenty of alternatives. Common alternatives are:

 

Add the PDFObject code

Here is a PDFObject statement in its simplest form:

var myPDF = new PDFObject({ url: "sample.pdf" }).embed();

A PDFObject statement has three pieces you'll need to customize: the variable name, the parameters for the PDF file, and the target in the HTML document.

var variablename = new PDFObject({ url: "file.pdf" }).embed("targetElementID");

Variable name. Feel free to use any variable name you like. PDFObject's embed() function returns the embedded <object>, similar to getElementById(). It therefore makes sense to give the variable a name befitting an object, such as myPDF or obj. This makes it easier to write conditional statements in your project code, such as:

var myPDF = new PDFObject({ url: "sample.pdf" }).embed();

if(myPDF){
  //do something
}

PDF parameters. When creating a new PDFObject instance, you need to provide the URL of the file you plan to embed, and include any optional embed parameters, including size and "PDF open" parameters (see the main page for more details). This data is passed to PDFObject as an object.

The only required information is the location (url) of the PDF file. In this example, we're sticking with the bare minimum:

var myPDF = new PDFObject({ url: "sample.pdf" }).embed();

Since the parameters are passed as an object, curly braces are required inside the parenthesis. You could also define your options object first, then pass it as a variable:

var myembedparams = {
  url: "sample.pdf"
};

var myPDF = new PDFObject(myembedparams).embed();

The first example is shorter and easier for this demonstration, but you may find the second method easier to use. Either method is acceptable.

Target element. Lastly, you need to specify where in the HTML file you'd like to embed the PDF. If you leave this parameter blank, PDFObject will automatically target document.body, which will make the PDF fill the entire browser window.

var myPDF = new PDFObject({ url: "sample.pdf" }).embed();

Note: For your convenience, PDFObject was designed to automatically set the height and width of both the PDF and the document's <html> and <body> elements when targeting document.body. This ensures Adobe Reader will fill the entire browser window with no margins or padding, and eliminates the need to manually add this CSS to your HTML file.

 

Final product

Your final HTML page should look something like this:

<html>
  <head>
     <title>PDFObject example</title>
     <script type="text/javascript" src="pdfobject.js"></script>
     <script type="text/javascript">
      window.onload = function (){
        var myPDF = 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>

Click here to see this example in action.

Click here to see more examples.