I had been thinking about finding an easy solution to embedding PDF files in HTML pages, but never got around looking for it until recently. Though there are services such as Scribd and Issuu but these require you to first upload the file.
Such a process is not only a bit tedious and you may also not have the rights to upload the content on to your own account. So how you display the amazing document that you found online in a PDF (or for that matter Excel sheets, Word documents, PowerPoint presentations and more) on your blog or website?
Simple. Use Google Docs Viewer. Google Docs viewer is a one-stop solution for all your document embedding needs. It supports over 15 different file types (19, if we include the variations). As I haven’t noticed too may people using Google Docs Viewer to embed their documents, thought it called for a post.
All you need is the URL of the document that you wish to display embedded on a webpage. This not only makes its easy for you to embed content uploaded by others but also your own documents.
Then go to http://docs.google.com/viewer and follow the steps to generate the embed code or you can also easily construct the embed code yourself (just replace the INSERT-URL-OF-DOCUMENT-HERE text in the code below with the URL of the document you wish to embed):
<iframe src="http://docs.google.com/gview?url=INSERT-URL-OF-DOCUMENT-HERE&embedded=true" style="width:610px; height:800px;" frameborder="0"></iframe>
The width and the height in the embed code can be modified to suit your requirements.
The best part of Google Docs Viewer is its wide support for a wide range of popular document and other formats (and also archive file types).
Here’s a list of all that you can do on your blog or website using Google Docs Viewer.
- Embed Microsoft Word (.DOC and .DOCX)
- Embed Microsoft Excel (.XLS and .XLSX)
- Embed Microsoft PowerPoint (.PPT and .PPTX)
- Embed Adobe Portable Document Format (.PDF)
- Embed Apple Pages (.PAGES)
- Embed Adobe Illustrator (.AI)
- Embed Adobe Photoshop (.PSD)
- Embed Tagged Image File Format (.TIFF)
- Embed Autodesk AutoCad (.DXF)
- Embed Scalable Vector Graphics (.SVG)
- Embed PostScript (.EPS, .PS)
- Embed TrueType (.TTF)
- Embed XML Paper Specification (.XPS)
- Embed Archive file types (.ZIP and .RAR)
(The last item on the list can be put to other creative uses. This calls for a separate post.)
I find it a smoother and more fulfilling experience to find documents within the webpage itself instead following a link to access them.
The Google Docs Viewer includes basic navigation controls and zoom. It would have been great if it also included an embed option within the viewer itself.
Happy embedding!
Example of a PDF document embedded in a blog post using Google Docs Viewer:
