Embed Google Docs document and PDF files within your web page


google-docs

One way of showing a formatted document on your web page is to embed a Google Document as an iFrame within your page.

The iFrame would then contain the document you wanted to view, including the ability to scroll the pages and print, etc.

This is a good way to show the final document to your viewers in an easy to read format without having to open the document in a new tab/window.

Update 20180820:

The following link does not work any more. BUT the methods below do! Do not go to this address just follow the instructions.

The document viewer https://docs.google.com/viewer (link is bad now, but the instructions below work…) has two parameters:

  1. url: the URL of the document
  2. embedded: if set to TRUE the viewer will use the embedded mode interface

So, if you wanted to view a PDF or DOC on your web page you would use an IFrame and the document (PDF, DOC, etc.)

http://docs.google.com/viewer?url=http://geek-easy.com/wp-content/uploads/2012/01/TOP-15-ESSENTIAL-FREE-SOFTWARE.pdf&embedded=true

I have created an example of the above page here

If, for example you have a document called ‘TOP-15-ESSENTIAL-FREE-SOFTWARE.pdf’ the various options to view this document would be:

Paste this link into email or IM:

https://docs.google.com/viewer?url=http://geek-easy.com/wp-content/uploads/2012/01/TOP-15-ESSENTIAL-FREE-SOFTWARE.pdf &embedded=true

Or, paste this HTML tag into your blog or website for a link to the viewer:
View

For an embedded viewer, use this HTML tag instead:

{googleapps domain="docs" dir="viewer" query="url=http://geek-easy.com/wp-content/uploads/2012/01/TOP-15-ESSENTIAL-FREE-SOFTWARE.pdf&embedded=true" width="600" height="780" /}

Replace the { and } with square brackets.

Example shortcode to embed pdf in your post

The benefit of using this method instead of just using the native Google viewer is that the user still has the focus of your web page with all the surrounding information and is not taken off to the google site to view the document.

You can use this technique to view all supported Google documents, which would be very useful for such things as presentations and spreadsheets.

The ifame is the container to hold the document, in the above example the width and height were set to keep the document within the page of the web page, these are of course not required.

There are other attributes for iFrames such as the frameborder and scrolling properties. You could also apply some CSS styling to make the appearance more in keeping with your sites theme. for example:

You could use the iFrame generator to create all the basic code for you and then just add your Google document to the src attribute.

7 thoughts on “Embed Google Docs document and PDF files within your web page

  1. Hello, there is no doubt that the google docs viewer is great solution for viewing. But it requires that the document gets out of your network and also it can be downloaded as the url is visible publicly. There is a similar viewer for asp.net search for “Doconut”

  2. Can anyone tell me how we can embed a .swf file or a HTML file in a google website. Actually i wish to put in an interactive quiz into a google website and google docs doesn’t provide options to put in an interactive quiz… please help.

  3. Great post. Do you know if this works on WordPress.com sites? So far all I’m seeing is WP.com app breaking the iframe code…. I went the “easy” way and my live to regret it.

Comments are closed.