Embed Google Docs document and PDF files 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 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.