Embed Google Docs document within your web page


One way of showing a formatted document on your web page is to embed a Google Document as an iFrame within your pageThe 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.The document viewer http://docs.google.com/viewer 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://freesoftware.mit.edu/papers/sturmer.pdf
      &embedded=true

I have created an example of the above page here

If, for example you have a document called ‘test.doc’ the various options to view this document would be:

Paste this link into email or IM:

http://docs.google.com/viewer?url=test.doc

Or, paste this HTML tag into your blog or website for a link to the viewer:
<a href=”http://docs.google.com/viewer?url=test.doc”>View</a&gt;

For an embedded viewer, use this HTML tag instead:
<iframe src=”http://docs.google.com/viewer?url=test.doc&embedded=true&#8221; width=”600″ height=”780″ style=”border: none;”></iframe>

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. There is a Google Docs Generator that you can enter a url of a document and then generate all the various links automatically.

Lastly… if you just want to view a PDF or other document online you could go directly to: http://docs.google.com/viewer

About these ads

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

  1. 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.

  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. 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”

  4. Pingback: [RESOLVED]Documenent viewer Web and free version | ASP Questions & Answers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s