pipwerks: home

pipwerks

Standards-friendy eLearning and Web development (HTML 5 version)

Introducing PDFObject

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 — http://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. :)

Like what you see? Why not share it!

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • FriendFeed
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Twitter

Related posts:

  1. Introducing LearnSWFObject.com
  2. Gotchas in Internet Explorer 8
  3. SWFObject and Google Analytics
  4. Constructive criticism for the new whitehouse.gov
  5. Dealing with Internet Explorer in your JavaScript Code

What others are saying... (8 comments so far)

Tom

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

Well done, Philip!

Al

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

Thanks for the feedback. Yes, there’s a PDF embedded there. :)

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

Tomo

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

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

pdfobject
very helpfull object

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

philip

@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

Want a gravatar? They're easy and free! Just sign up at gravatar.com

Add your two cents!

You can use the following HTML tags in your comment: <a> <abbr> <b> <blockquote> <cite> <code> <em> <i> <q> <strike> <strong> <pre>

The anti-spam code is my LAST NAME, and can be found in the page footer.
Be careful not to misspell it.

I'm currently moderating comments. Please don't submit your comment twice; it will appear as soon as I can approve it.