Update March 2011: PDFObject source code has been updated and moved to GitHub.

I recently worked on an e-learning course that required embedding some PDFs into an HTML file. PDF embedding piqued my curiosity, and has become something of a pet project. It sounds simpler than it is. No, scratch that… it is pretty simple. Stoopid simple. The problem is that there’s a lot of bad info about embedding PDFs floating around the www, especially regarding using the embed element.

Note to readers: embed bad, object good.

Unlike embedding SWFs, embedding a PDF is a breeze if you use the object element, and the object element has the added bonus of being totally standards-compliant.

As I tinkered on my new pet project, I decided it would be nice to have a JavaScript script that could dynamically embed PDFs as easily as SWFObject allows SWF embedding. I managed to whip up a script, and decided to name it PDFObject. (I know, I know… what a creative name!) As you may have inferred from the name, the concept and functionality is pretty similar to SWFObject. Like SWFObject, it’s also standards-friendly, and uses DOM scripting techniques to write a standard object element to the page.

One of the perks of using this script is that it makes working with PDF Open parameters much easier, similar to how SWFObject makes working with flashvars easier.

I’ve built a simple website for my PDFObject project named — drumroll, please — https://pdfobject.com. The most time-consuming part of this project has actually been building the website; it includes instructions, a ton of examples, and a compatibility table detailing results from browser/OS testing, including Mac OS X 10.5, Win XP, Vista, and Ubuntu. The site also features a section devoted to PDF embedding using standard HTML code without JavaScript (gotta promote standards!), and a handy code generator that makes writing the code as easy as filling out a form.

The site purposely does not include support or contact information; while I enjoy making things that help people out, I already know I don’t have the time to handle support issues. Sorry!

Anyway, PDFObject is completely free (as-is, no warranties) and my gift to the community. I hope some of you find it useful.


Comments

Tom wrote on October 2, 2008 at 12:46 am:

Nice! Never thought about doing that kind of thing before, and it's given me some good ideas for some problems I've had in the past.

Thanks a lot!

Aaron wrote on October 2, 2008 at 3:50 pm:

Well done, Philip!

Al wrote on October 16, 2008 at 2:06 am:

The big rectangle near the top of the PDFobject website is blank. I suppose something should be there. I'm using IE6 on Win 2000

Philip Hutchison wrote on October 16, 2008 at 7:17 pm:

Thanks for the feedback. Yes, there's a PDF embedded there. 🙂

What version of Adobe/Acrobat Reader do you have installed?

Tomo wrote on November 14, 2009 at 5:34 am:

I am not sure if this is a bug of Adobe Reader 9.x or Firefox's.
Even if I uncheck "Display PDF in Browser" in Adobe Reader 9.x,
navigator.plugins does not change at all.
Therefore your pdfobject does not work as expected in this case.
PDF files are not embedded, but instead they display in Adobe Reader proper.
In that sense detection fails somehow.

Pluginreg.dat in Firefox's profile folder does not change itself even if I uncheck "Display PDF in Browser" in Adobe Reader 9. This is not the case in Adobe Reader 8.

Do you have any idea?

Jan Eerdekens wrote on January 22, 2010 at 5:02 am:

Hi,

First off all thank you for the great library. Secondly I've run into a small problem using the library on WinXp/IE6 without an Acrobat Reader installed.

I get a Javascript error on: a=new ActiveXObject("AcroPDF.PDF"). After installing Acrobat Reader the problem disappeared. Since I'm using the code to first do detection of a plugin this is a little bit inconvenient.

I was wondering if there's a way to fix this? A try/catch could maybe work?

ell wrote on February 5, 2010 at 1:12 am:

pdfobject
very helpfull object

is it possible to render the PDF in canvas element ?
something like :
.embed('myCanvas')

philip wrote on February 9, 2010 at 9:20 pm:

@tomo @jan thanks for the feedback, i'll dust off the codebase and do some additional testing when i can find time

@ell as far as i know, PDFs cannot be rendered natively in a canvas element

Asim wrote on April 23, 2010 at 11:53 am:

Hi,

Great idea.

Is this script free to use? Open source?

What are the license regulations if I use it on my site?

philip wrote on April 23, 2010 at 12:17 pm:

As I noted in the blog post, PDFObject is free (it's released under an <a href="http://creativecommons.org/licenses/MIT/" rel="nofollow ugc">MIT license</a>, which essentially means you can do whatever you want with it).

Asim wrote on April 23, 2010 at 1:05 pm:

@philip – Thank you.

Shanto wrote on July 25, 2010 at 3:07 am:

Great Job! But, it doesn't seem to detect Safari's built-in PDF support. Not even your sample PDF on the front-page of http://pdfobject.com seem to render when tested from Safari 4.0 on Mac OS X 10.6.3. Not sure how it is in Safari 5.0/10.6.4 – I have not upgraded yet.

philip wrote on August 6, 2010 at 9:58 pm:

@Shanto you're right, it appears Apple changed Safari's PDF handling. This will require some research and will probably require edits to the PDFObject script. Thanks for the tip.

Mamatha wrote on November 19, 2010 at 4:45 am:

Hi Philip,

Thanks for the wonderful library. I ran into a problem while trying to integrate PDFObject with our application.

We have a servletURL which will return the PDF which has JavaScript embedded in it. When we open the PDF, javascript embedded in the PDF should get executed automatically. For creating a PDFObject, I pass this servletURL as value for URL. I found that JavaScript is not getting executed when we open PDF within PDF object.

Also is there a plan for fixing these below issues specified in the PDFObject website in near future:
# Crashes/hanging when trying to replace an embedded PDF with a second PDF (by replacing the first element with a new ).
# Crashes/hanging when attempting to embed more than one PDF on a single HTML page (FYI this behavior can be avoided by using iframes).

philip wrote on November 22, 2010 at 10:10 am:

@Mamatha thanks

without seeing your servletURL, i can't really give any advice.

RE the outstanding issues: those particular issues are not due to my script, they're due to the browser's PDF handling and/or adobe acrobat. from what i can tell, there's nothing anyone can do about them (at least not with JavaScript). i haven't tested with the latest versions of acrobat, firefox, safari, chrome, etc., so it's possible the browser vendors and/or adobe have already addressed some of these glitches.

as for updating PDFObject, it's on my to-do list, but isn't a very high priority at the moment.

Robert O. Schmidt wrote on January 19, 2011 at 10:50 am:

I spend TWO DAYS trying to get PDFs to embed and be able to delay loading. Either it would in some browsers and not others OR they would work intermittently. FRUSTRATING to say the least!

If you have a PayPal account I would personally like to buy you a beer. Strike that! A six pack! Just email me the info.

This is for a totally rewritten site for a non-profit Scottish Clan called Clan Lindsay. In about a month or two you will be able to the results at <a href="http://clanlindsayusa.org" rel="nofollow ugc">Clan Lindsay USA</a>.

Thank YOU!
-Robert

Thanks Again!

philip wrote on January 19, 2011 at 1:03 pm:

@robert thanks for letting me know, it's always nice to hear success stories 🙂

fefilla wrote on February 23, 2011 at 8:51 am:

Check out this for PDF support detection techniques: http://www.pinlady.net/PluginDetect/

Similar Posts

18 Comments

  1. Nice! Never thought about doing that kind of thing before, and it’s given me some good ideas for some problems I’ve had in the past.

    Thanks a lot!

  2. The big rectangle near the top of the PDFobject website is blank. I suppose something should be there. I’m using IE6 on Win 2000

  3. I am not sure if this is a bug of Adobe Reader 9.x or Firefox’s.
    Even if I uncheck “Display PDF in Browser” in Adobe Reader 9.x,
    navigator.plugins does not change at all.
    Therefore your pdfobject does not work as expected in this case.
    PDF files are not embedded, but instead they display in Adobe Reader proper.
    In that sense detection fails somehow.

    Pluginreg.dat in Firefox’s profile folder does not change itself even if I uncheck “Display PDF in Browser” in Adobe Reader 9. This is not the case in Adobe Reader 8.

    Do you have any idea?

  4. Hi,

    First off all thank you for the great library. Secondly I’ve run into a small problem using the library on WinXp/IE6 without an Acrobat Reader installed.

    I get a Javascript error on: a=new ActiveXObject(“AcroPDF.PDF”). After installing Acrobat Reader the problem disappeared. Since I’m using the code to first do detection of a plugin this is a little bit inconvenient.

    I was wondering if there’s a way to fix this? A try/catch could maybe work?

  5. pdfobject
    very helpfull object

    is it possible to render the PDF in canvas element ?
    something like :
    .embed(‘myCanvas’)

  6. @tomo @jan thanks for the feedback, i’ll dust off the codebase and do some additional testing when i can find time

    @ell as far as i know, PDFs cannot be rendered natively in a canvas element

  7. Hi,

    Great idea.

    Is this script free to use? Open source?

    What are the license regulations if I use it on my site?

  8. Great Job! But, it doesn’t seem to detect Safari’s built-in PDF support. Not even your sample PDF on the front-page of http://pdfobject.com seem to render when tested from Safari 4.0 on Mac OS X 10.6.3. Not sure how it is in Safari 5.0/10.6.4 – I have not upgraded yet.

  9. @Shanto you’re right, it appears Apple changed Safari’s PDF handling. This will require some research and will probably require edits to the PDFObject script. Thanks for the tip.

  10. Hi Philip,

    Thanks for the wonderful library. I ran into a problem while trying to integrate PDFObject with our application.

    We have a servletURL which will return the PDF which has JavaScript embedded in it. When we open the PDF, javascript embedded in the PDF should get executed automatically. For creating a PDFObject, I pass this servletURL as value for URL. I found that JavaScript is not getting executed when we open PDF within PDF object.

    Also is there a plan for fixing these below issues specified in the PDFObject website in near future:
    # Crashes/hanging when trying to replace an embedded PDF with a second PDF (by replacing the first element with a new ).
    # Crashes/hanging when attempting to embed more than one PDF on a single HTML page (FYI this behavior can be avoided by using iframes).

  11. @Mamatha thanks

    without seeing your servletURL, i can’t really give any advice.

    RE the outstanding issues: those particular issues are not due to my script, they’re due to the browser’s PDF handling and/or adobe acrobat. from what i can tell, there’s nothing anyone can do about them (at least not with JavaScript). i haven’t tested with the latest versions of acrobat, firefox, safari, chrome, etc., so it’s possible the browser vendors and/or adobe have already addressed some of these glitches.

    as for updating PDFObject, it’s on my to-do list, but isn’t a very high priority at the moment.

  12. I spend TWO DAYS trying to get PDFs to embed and be able to delay loading. Either it would in some browsers and not others OR they would work intermittently. FRUSTRATING to say the least!

    If you have a PayPal account I would personally like to buy you a beer. Strike that! A six pack! Just email me the info.

    This is for a totally rewritten site for a non-profit Scottish Clan called Clan Lindsay. In about a month or two you will be able to the results at Clan Lindsay USA.

    Thank YOU!
    -Robert

    Thanks Again!

Comments are closed.