Javascript PDF Viewer

Javascript PDF Viewer

Two nearly ubiquitous digital media come together when you place a javascript PDF viewer on your site. There are distinct advantages to putting one up, but it can be a tricky process.

Why Use a Javascript PDF Viewer

Javascript is used all over the place to increase the interactivity of the web, feed data back to servers, show dynamic content such as stock tickers, or even just to make the site look pretty. While there are some security risks to having javascript enabled, the vast majority of websites can utilize it because using Javascript is a very common design technique.

Portable Document Format, or "PDF" as it's become known, is a proprietary format that Adobe Corporation came up with to show documents with all their formatting intact - fonts, layout, size, color, everything. While the application (in it's 9th iteration as of 2010) has increased in functionality dramatically over the years, at its heart it is simple: show the doc the way it was intended by the author, without any issues with the web compatibility of browsers and other client issues. Because Adobe positioned itself early on as the dominant typographic force in digital publishing, PDFs have become a "sure" way to send documents via the web and still be sure to get your message across. When you combine the two technologies, you get a wide array of coding techniques to manipulate data and display them as PDFs for viewers on your web page. This includes things like:

  • Creating dynamic PDF's based on user input or current data
  • Searching PDF content
  • Preserving font and layout without worrying about browser version
  • Integration with other Javascript technologies such as Google's Javascript reader
  • Control whether links to PDFs on your page open in an "embedded" or a "true" (separate window) viewer.

These are all very useful design tools. However, implementing them can be a little tricky.

Three Sources for Javascript PDF Viewers

Here are three ways to implement a javascript PDF viewer on your site:

Use Google

Google's Reader has a very useful feature that allows it to be embedded in a web page with just a few lines of javascript code. In fact, Google (as usual) makes it incredibly easy to generate the code necessary, either by simply entering the URL of the PDF doc and letting the code generator create the code (ironically, using a javascript method) or by reading the "technical documentation" available on the page.

Of course, the disadvantage of this method is that you are dependent on Google for all of the back-end processing, and if Google changes, it is unlikely to consult with you before it does what it likes. Some people prefer to have more control over their sites.

Use the Adobe API

Adobe has never been shy about sharing the ability to read PDF's (which means they can charge a lot for the ability to create them). Javascript for Acrobat is the page on their site that contains full documentation for running all kinds of javascript/PDF functions on your site. It boasts of being especially useful when working with XML, and supporting things like layers, 3-d, multimedia, and other features. While it requires more coding knowledge than the Google method, it also offers much more control.

Join the Open Source Crew

Many people in the Open Source software movement have come up with various ways to work with javascript and PDFs, and they share those methods on the web. Websites such as Hacker News talk about various ways of implementing the code that Adobe and Google have released. These "hacks" aren't always new code as much as simply programmers wanting the code to work in exactly the way that they intend, rather than the way the big corporations suggest.

Whatever method you choose, it is undeniable that javascript and PDFs can be very useful tools in your web design toolbox.

Javascript PDF Viewer