Display PDFs Inline with A Little Help From Google…

Ahh the PDF. The gold standard of document exchange and sharing, PDFs are one of the most commonly used filetypes today. But they have a drawback when it comes to the web. Unlike image files (JPEG, GIF, TIFF, PNG, etc.), you can’t easily display a PDF inline with HTML on a website. “Why is this a problem?” I hear you ask. Suppose you want to show project spec sheets in a web portfolio, or show a resume on a personal site. You can’t use a PDF without converting each page to an image and then displaying them all on your page. With a little help from Google, however, the process becomes a whole lot easier.

As you may or may not know, Google has a very popular service called Google Docs, a cloud based document processing suite a la MS Office on the web. As part of the service, you can upload files (including PDFs) and have them saved in your document library. When you want to view one of your files, you can just click and see it instantly. No downloading, no nonsense. Google pull off the trick of displaying PDFs on web pages using their own special tool. This tool takes the file you upload and displays it using some fancy Javascript.

It turns out you can take this technology found in Google Docs (and other areas of Google for that matter) and use it on your own site by embedding the converter tool in an iFrame. The code below demonstrates this:

<iframe src="http://docs.google.com/gview?url=http://elliottmediagroup.com/PATH_TO_PDF.pdf&embedded=true" frameborder="0"></iframe>

This simple chunk of code generates the following result:

So all you have to do is include this iFrame with the path to your PDF (which you could dynamically generate using a ton of techniques) and voila, you have a PDF displayed on your page! You can of course style up the frame with width and height and other attributes. Its a pretty sweet solution!

I don’t want to take credit for coming up with this technique all by my lonesome. I found a great thread on StackOverflow where people had this exact issue, and someone came up with this great solution. Thanks!