Using Google Docs Viewer to embed online documents into your web page

Step 1: use the iframe tag to create an “internal” frame within your document

The iframe tag accepts 3 x attributes: “src”, “width” and “height”

If you are interested in removing the border from the iframe tag simply do this by the frameBorder attribute (remember – frameBorder is case-sensitive):
frameBorder=”0”

Step 2: Use the Google Docs link within your src attribute

https://docs.google.com/gview?

So that all you need to do is supply the URL that Google docs view needs to point to.

In this example it is a Microsoft PowerPoint presentation available at the Adobe site:

https://www.adobe.com/support/ovation/ts/docs/ovation_test_show.ppt

Example HTML code listing

<!DOCTYPE html>
<html>
	<body>
		<iframe src="https://docs.google.com/gview?url=https://www.adobe.com/support/ovation/ts/docs/ovation_test_show.ppt&embedded=true" 
		style="width: 90%; height: 1000px">
			<p>Your browser does not support iframes.</p>
		</iframe>
	</body>
</html>

So that when we save the code as a HTML file and open it in our browser, the PowerPoint presentation is embedded in our html and displayed as shown:

ppt

Leave a Reply