How to View/Open a Word Document in My Browser Using with PHP or HTML

How can I view/open a word document in my browser using with PHP or HTML

Two options: First is to just link to it, e.g. <a href="MyWordDocument.doc">My Word Document</a>, the second is to use an iframe and point it to the document. For this to work, however, most browsers require that the server sends a Content-disposition: inline header with the document. If you cannot configure your web server to do this, you can wrap the document in a bit of php:

<?php
header('Content-disposition: inline');
header('Content-type: application/msword'); // not sure if this is the correct MIME type
readfile('MyWordDocument.doc');
exit;

And then link to that script instead of your word document.

This isn't guaranteed to work though; the content-disposition header is just a hint, and any browser may choose to treat it as an attachment anyway.

Also, note that .doc isn't exactly portable; basically, you need Word to display it properly (Open Office and a few other Open Source applications do kind of a decent job, but they're not quite there yet), and the browser must support opening Word as a plugin.

If the .doc file format requirement isn't set in stone, PDF would be a better choice (the conversion is usually as simple as printing it on a PDF printer, say, CutePDF, from inside Word), or maybe you can even convert the document to HTML (mileage may vary though).

How do I render a Word document (.doc, .docx) in the browser using JavaScript?

No browsers currently have the code necessary to render Word Documents, and as far as I know, there are no client-side libraries that currently exist for rendering them either.

However, if you only need to display the Word Document, but don't need to edit it, you can use Google Documents' Viewer via an <iframe> to display a remotely hosted .doc/.docx.

<iframe src="https://docs.google.com/gview?url=http://remote.url.tld/path/to/document.doc&embedded=true"></iframe>

Solution adapted from "How to display a word document using fancybox".

Example:

JSFiddle

However, if you'd rather have native support, in most, if not all browsers, I'd recommend resaving the .doc/.docx as a PDF file Those can also be independently rendered using PDF.js by Mozilla.

Edit:

Huge thanks to cubeguerrero for posting the Microsoft Office 365 viewer in the comments.

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' width='1366px' height='623px' frameborder='0'>This is an embedded <a target='_blank' href='http://office.com'>Microsoft Office</a> document, powered by <a target='_blank' href='http://office.com/webapps'>Office Online</a>.</iframe>

One more important caveat to keep in mind, as pointed out by lightswitch05, is that this will upload your document to a third-party server. If this is unacceptable, then this method of display isn't the proper course of action.

Live Examples:

Google Docs Viewer

Microsoft Office Viewer

How to view word, Power point and Excel files in browser using PHP?

That would be way too complicated to do from scratch. I suggest using a docs viewer https://docs.google.com/viewer which already has pretty fine file format support. It basically converts those file into html/canvas and it might be embedded.

---

Related Topics