Embed Google Docs Document And PDF Files Within Your Web Page

Skip to content

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=https://ohansemmanuel.github.io/assets/pdf/understanding-flexbox.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=https://ohansemmanuel.github.io/assets/pdf/understanding-flexbox.pdf&embedded=true" width="600" height="780" /}

Using an iframe

<iframe src="https://docs.google.com/viewer?embedded=true&url=FILE_URL" style="width: 100%; height: 400px; border: none;"></iframe>

Replace the { and } with square brackets.

Just pasting the pdf file into a post

Click to access understanding-flexbox.pdf

Using the shortcode

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.

Share this:

• Facebook
• X
• LinkedIn
• Pinterest
• Print
• Email

Like Loading...

Related

Published by Jonathan

Generally interested in everything web, photography and video. View all posts by Jonathan

Post navigation

Previous Post walkscore – walkable areas of interestNext Post Creating a shared calendar

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

1. […] https://jonathancamp.com/2010/04/01/embed-google-docs-document-within-your-web-page/ […]

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

3. Great beat ! I would like to apprentice whilst you amend your site, how can i subscribe for a blog web site? The account aided me a appropriate deal. I have been a little bit acquainted of this your broadcast provided brilliant transparent concept

4. How do you get it to only display the first page of a multi page document? Doc, Docx

5. That’s not a viewer for Google Docs, it’s a viewer for docs hosted elsewhere.

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

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

• Reblog
• Subscribe Subscribed
  • Jonathan Camp
  Join 54 other subscribers Sign me up
  • Already have a WordPress.com account? Log in now.
• • Jonathan Camp
  • Subscribe Subscribed
  • Sign up
  • Log in
  • Copy shortlink
  • Report this content
  • View post in Reader
  • Manage subscriptions
  • Collapse this bar

Loading Comments... Write a Comment... Email (Required) Name (Required) Website %d