Embedding docs

In my previous post I included a viewer that allowed you to page through PDF file. This used the Google Drive (nee Docs) Viewer.

You may already be familiar with this for viewing attachments in GMail and documents in Google Drive but you can also access it directly using the snippet of code shown below:

<iframe src="https://drive.google.com/file/d/0B8p1gAHHCMytS3ZrazdoRWVZVmc/preview" width="640" height="480"></iframe>

According to the documentation Google Drive viewer allows you to preview over 16 different file types, listed below:

  • Image files (.JPEG, .PNG, .GIF, .TIFF, .BMP)
  • Video files (WebM, .MPEG4, .3GPP, .MOV, .AVI, .MPEGPS, .WMV, .FLV)
  • Text files (.TXT)
  • Markup/Code (.CSS, .HTML, .PHP, .C, .CPP, .H, .HPP, .JS)
  • Microsoft Word (.DOC and .DOCX)
  • Microsoft Excel (.XLS and .XLSX)
  • Microsoft PowerPoint (.PPT and .PPTX)
  • Adobe Portable Document Format (.PDF)
  • Apple Pages (.PAGES)
  • Adobe Illustrator (.AI)
  • Adobe Photoshop (.PSD)
  • Tagged Image File Format (.TIFF)
  • Autodesk AutoCad (.DXF)
  • Scalable Vector Graphics (.SVG)
  • PostScript (.EPS, .PS)
  • TrueType (.TTF)
  • XML Paper Specification (.XPS)
  • Archive file types (.ZIP and .RAR)

One word of warning. If you intend to use this in a WordPress post you MUST do it in the text view otherwise the HTML will be stripped out.