Best IT Recipes

How to make a Word document (.doc, .docx) in a browser using JavaScript?

I successfully executed the code to display the PDF file in the browser instead of the Open / Save dialog. Now I'm stuck trying to display a Word document in a browser. I want to display a Word document in Firefox, IE7 +, Chrome, etc.

Can anyone help? I always get the Open / Save dialog when a Word document is displayed in a browser. I want to implement this functionality using JavaScript.

+109
javascript browser ms-word
Jan 15 '15 at 6:18
source share
7 answers

No browser currently has the code needed to render Word documents, and as far as I know, there are currently no client-side libraries to render them.

However, if you only need to display the Word document but do not need to edit it, you can use the Google Document Viewer via <iframe> to display the remotely hosted .doc / .docx .

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

The solution is adapted from " How to display a text document using fancybox ".

Example:

Jsfiddle

However, if you prefer the built-in support, in most, if not all browsers, I would recommend saving the .doc / .docx file as a PDF file. They can also be independently rendered using Mozilla's PDF.js.

Edit:

Many thanks to fatbotdesigns 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>

Another important point to keep in mind, as lightswitch05 points out , is that your document will be uploaded to a third-party server. If this is unacceptable, then this mapping method is not the right course of action.

Live examples:

Google docs viewer

Microsoft Office Viewer

+183
Jan 15 '15 at 6:56
source share

The answers of Brandon and fatbotdesigns are correct, but having implemented a preview of Google documents, we found several .docx files that Google could not process. I switched to a preview of MS Office Online, and the work likes the charm.

My recommendation would be to use the MS Office preview URL via Google.

 https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc'
+24
Mar 17 '17 at 12:25
source share

There seems to be some js libraries that can handle .docx (not .doc) to client side html conversion (in random order):

Note. If you are looking for the best way to convert the doc / docx file on the client side, then probably the answer is do not. If you really need to do this, then do it on the server side, that is, with libreoffice in headless mode , apache-poi (java) , pandoc, or any other library that is best for you.

+7
Sep 20 '17 at 7:31 on
source share

ViewerJS is useful for viewing / pasting an openoffice format such as odt, odp, ods, as well as pdf.

To enter openoffice / pdf document

 <iframe src = "/ViewerJS/#../demo/ohm2013.odp" width='700' height='550' allowfullscreen webkitallowfullscreen></iframe>

/ViewerJS/ is the path to ViewerJS

#../demo/ohm2013 is the path to the file you want to insert

+2
Sep 21 '17 at 9:54 on
source share

Native Documents (which I'm interested in) makes a viewer (and editor) especially for Word documents (both legacy binary .doc formats and modern docx). This is done without lossy conversion to HTML. Here's how to get started https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

+1
Jan 22 '19 at 21:42
source share

I think I have an idea. This also made my nut, and I still have problems displaying it in Chrome.

Save document (name.docx) as a single web page file (name.mht) In its use html

 <iframe src= "name.mht" width="100%" height="800"> </iframe>

Change the height and width as you wish.

0
Nov 13 '15 at 10:21
source share

If you want to pre-process DOCX files rather than waiting for runtime, you can first convert them to HTML using a file conversion API like Zamzar . You can use the API to programmatically convert from DOCX to HMTL, save the output to your server, and then serve this HTML to your end users.

The conversion is pretty simple:

 curl https://api.zamzar.com/v1/jobs \ -u API_KEY: \ -X POST \ -F "source_file=@my.docx" \ -F "target_format=html5"

This will remove any runtime dependencies from Google and Microsoft services (for example, if they were not available or you are limited in speed).

In addition, you can use other types of files if you want (PPTX, XLS, DOC, etc.)

0
Nov 10 '17 at
source share


More articles:


All Articles