Wednesday 5 December 2012

Using Google Viewer to display PDF Files in your Web Site

Using Google Viewer to display PDF Files in your Web Site

I have been developing a site that contains several large PDF files. I wanted to have a quality version of the file for downloading and a lower quality for online viewing. The online version is a lower quality so that delay is minimised.
In doing this I discovered a few things.
  • You can use Acrobat X to produce reduced size version that will start display the first page without waiting for the whole file to be made ready.
  • All the browsers handle this file differently, and some not at all

I am using Weebly to build the site, and the Pro version has a feature to display PDF files using the viewer Scribd. THis is OK but appears to be Adobe Flash based, and it does not work on IOS (iPhone, iPad) platform. Therefore I looked for another approach. I noticed in testing the Google Chrome browser is that it uses its own Google Docs Viewer. This facility can be used in your own web sites.
This is the page being developed within Weebly Pro.
google-viewer-2012-10-otp-dev

I want the Alternative Viewer called by the ONLINE QUICK button to use the Google viewer.

First you need to upload the PDF to Weebly. To do this I use the standard Weebly features to create a button and link this button to my PDF.


google-viewer-2012-10-button-link

The file I uploaded is named in the File on Your Website. Copy this filename. Publish this site using standard Weebly methods and navigate to the page.
google-viewer-2012-10-link-box

Clicking on the button will open PDF file as shown below (this may look different depending on browser). The online filename is given in the browser navigation box. Copy this name.

google-viewer-2012-10-pdf-standard

You now need to open another tab in your browser and go to docs.google.com/viewer where you paste the address of the PDF in the first box. Click on Generate Link
google-viewer-satup

You should now see the following screen. There are options to embed the code into a HTML page, but the option I use is Paste this link into email or IM: Copy the link.
google-viewer-2012-10-setup

Return to Weebly development page edit the button so that it now links to the address we copied previously.
google-viewer-2012-10-link-box

Again, using standard Weebly controls publish the site and visit the page. Now when you click on the QUICK ONLINE button you should see the following Google Viewer version of the PDF, which in my case opens in a new tab.
google-viewer-2012-10-pdf-google

Real Example

If you want to see this in action then please visit The Orange Tree Press site. This company sells high quality greetings cards, mainly of a religious nature.