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.

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.


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.

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.


You now need to open another tab in your browser and go to where you paste the address of the PDF in the first box. Click on Generate Link

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.

Return to Weebly development page edit the button so that it now links to the address we copied previously.

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.

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.


  1. Thank you for an interesting article, I like weebly, although I do get annoyed with it's silly limitations, No not a grip regarding Standard and Pro accounts (I have been Pro for some time and benefited from their 2yr renewal earlier this year)

    I refer to the silly limitations such as download a back up - but it is useless as you can't upload it ? There must be a reason for this, but I'm buggered if I can find it!

    However, AS you gave a tip, I will pass 3 back...

    1, Use the zip function to down load the back up and edit it using a easy free program such as KompoZer free to use and under a few kb (you can run it from a usb (or even dropbox) edit the page and upload it as a page back to weebly via their edit themes.

    2, Consider Acrobat XI it will save big PDF's as PNG - Which can be uploaded into Weebly's Photo Gallery's ( I made a 230 Page Flip book this way - works a treat -

    3. Best of all, make the ultimate upload/down load page using OpenDrive and add it as an iframe in Html - nice to be able to let others upload pictures, letters etc or down load your info at no expense! -

    Open drive allows public folders to be accessed without any login and you can specify which folders are shared. so 1 account can run as many sites as you need without cross-overs.

    Hope some of these tips help


  2. PS Sorry, didn't quite explain (adding unable to edit post to the list of gripes)

    Using the PNG I was able to upload the whole book under 8MB! usually it would be 250+ MB which would kill the page, or leave the viewer time to cook dinner and paint the house!