On a recent project, our system needed to be able to display a preview of various types of documents. We needed to be able to preview Word files, Excel files, PowerPoint presentations, PDF files, OpenOffice documents and so on.
Naturally, the first port of call was a Google search for “how to display Word files in javascript.” We already knew it was possible to preview PDF files using pdf.js, but feared that Microsoft formats might be a little trickier! I was envisioning having to use PHP Office to convert to PDF and then pdf.js to display them.
Luckily, we were saved that fate by the existence of the Office 365 and Google Docs preview functionality. With them, previews become as simple as:
Google Docs Preview:
<iframe style="width: 100%; height: 450px;" src="http://docs.google.com/gview?url=**{ url encoded document url }**&embedded=true" frameborder="0"></iframe>;
Office 365 Preview:
<iframe style="width: 100%; height: 450px;" src="https://view.officeapps.live.com/op/embed.aspx?src=**{ url encoded document url }**&embedded=true" frameborder="0"></iframe>
Naturally, you won’t want to use this if the documents you are previewing are particularly sensitive, as Google or Microsoft respectively will need to download a copy of your file in order to preview it. However, for a quick and efficient way of previewing documents, it saved us an awful lot of time!
