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

I have successfully done code to display a PDF file in the browser instead of the "Open/Save" dialog. Now, I'm stuck trying to display a Word document in the browser. I want to display a Word document in Firefox, IE7+, Chrome etc. Can any one help? I am always getting the "Open/Save" dialog while displaying the Word doc in browser. I want to implement this functionality using JavaScript.

1,337 1 1 gold badge 16 16 silver badges 33 33 bronze badges asked Jan 15, 2015 at 6:18 3,361 4 4 gold badges 17 17 silver badges 22 22 bronze badges Commented Jan 15, 2015 at 6:19 you can use syncfusion-document-editor in react for show and edit docx files Commented Feb 9, 2020 at 6:28

15 Answers 15

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 to display a remotely hosted .doc / .docx .

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.

This is an embedded Microsoft Office document, powered by Office Online.

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:

908 13 13 silver badges 38 38 bronze badges answered Jan 15, 2015 at 6:56 Brandon Anzaldi Brandon Anzaldi 7,180 3 3 gold badges 37 37 silver badges 56 56 bronze badges

@Pankaj Even if you're hosting a local server, Google cannot access localhost . It needs a publicly accessible URL. You could use a basic forwarding service like Finch.

Commented Jan 15, 2015 at 8:41

You could also use the office live apps viewer: //view.officeapps.live.com/op/embed.aspx?src=your_url_here put this url in an iframe

Commented Jan 18, 2016 at 9:36

Just want to point out that both of these methods definitely upload the files to Google's and Microsoft's servers. If you are dealing with sensitive information that should have limited access- do not do this. Use the alternative solution with PDF.js to generate a PDF version of the file to view in the browser and offer a link to download the various excel/doc versions.

Commented Sep 28, 2017 at 17:47

@lightswitch05 hey, just stumbled upon this, I have looked at pdf.js after reading your comment and couldnt find any documentation regaring the conversion of doc / xls files to pdf to display them within the browser, how would this work exactly?

Commented Nov 25, 2020 at 15:11 we are in 2021 and still there's no solution to this, sadly! 😢 Commented Feb 5, 2021 at 19:29

The answers by Brandon and fatbotdesigns are both correct, but having implemented the Google docs preview, we found multiple .docx files that couldn't be handled by Google. Switched to the MS Office Online preview and works likes a charm.

My recommendation would be to use the MS Office Preview URL over Google's.

https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc'

answered Mar 17, 2017 at 12:25 kernelmann kernelmann 509 4 4 silver badges 3 3 bronze badges Is there any restriction to use this ? support.microsoft.com/en-us/help/2769380/… Commented Feb 15, 2018 at 7:03

to provide a counter narrative - we chose the google version because the microsoft renderer takes a lot longer to load in both chrome and ff

Commented Jul 24, 2018 at 15:18 Is there similar service for previewing PDFs? Commented Jul 23, 2021 at 10:45

An error occurred We're sorry, but for some reason we can't open this for you. i got this error when used this

Commented Aug 16, 2021 at 13:25 @IgorNikiforov for PDFs you can use mozilla's pdf.js — it's solid, reliable and time-tested Commented Feb 11, 2023 at 20:41

There are a few JS libraries that can handle .docx (not .doc) to HTML conversion client-side (in no particular order):

https://github.com/VolodymyrBaydalka/docxjs — works in the browser, docx only, some complex layouts might be off; (actively maintained) live demo
https://github.com/lalalic/docx2html (npm) — docx to html, most elements are supported, works in browser or nodejs
https://github.com/mwilliamson/mammoth.js — supports headings, lists, tables, endnotes, footnotes, images and text boxes
https://github.com/artburkart/docx2html — apparently, works in the browser

Note: If you are looking for the best way to convert a doc/docx file on the client side, then probably the answer is don't do it. If you really need to do it then do it server-side, i.e. with libreoffice in headless mode, apache-poi (java), pandoc etc.

answered Sep 20, 2017 at 7:31 31.1k 20 20 gold badges 176 176 silver badges 180 180 bronze badges

I will note that my library is completely unmaintained. It was able to convert docx files to something that could be rendered in the browser. I don't know if this is true anymore.

Commented Nov 9, 2017 at 16:41 Why do you say "the answer is don't do it"? Commented May 2, 2022 at 16:35

@Luke because this is the kind of task that should preferably done serverside; doing it client-side is delegating too much responsibility to the client and making too many assumptions about the client's capabilities, performance, etc; ideally you'd want to have everything rendered on the server and delivered to the client in most efficient way, preferably in an easily cacheable format

Commented May 2, 2022 at 17:26

A great solution if your data is confidential

Since the documents are confidential, they should not be processed on third-party resources.
This solution is open-source:

On the server-side: use Gotenberg to convert word & excel files to PDF.
Note: Gotenberg works like a charm, it is based on the LibreOffice engine.
On the frontend: It's very easy to render the PDF file with javascript. (You can use libraries like: pdf.js, react-pdf, etc.)

answered Dec 8, 2021 at 19:37 Masih Jahangiri Masih Jahangiri 10.6k 3 3 gold badges 51 51 silver badges 54 54 bronze badges This is the best solution of a standalone renderer ! Commented Jan 2, 2022 at 10:26

ViewerJS is helpful to view/embed openoffice format like odt,odp,ods and also pdf.

For embed openoffice/pdf document

/ViewerJS/ is the path of ViewerJS

#../demo/ohm2013 is the path of your file want to embed

1 1 1 silver badge answered Sep 21, 2017 at 9:54 4,334 6 6 gold badges 40 40 silver badges 61 61 bronze badges Shall i able use the link url from aws s3 Commented Feb 15, 2018 at 6:52 Nope,You Provide Only Local link Commented Feb 15, 2018 at 6:59 Unfortunately in my context microsoft formats are more widespread. Commented Jan 16, 2019 at 15:21 @guettli you can use pandoc to convert. there is a pandoc wasm version somewhere out there Commented Nov 9, 2020 at 16:15 how about docx? Commented Jan 19, 2022 at 8:49

I think I have an idea. This has been doing my nut in too and I'm still having trouble getting it to display in Chrome.

Save document(name.docx) in word as single file webpage (name.mht) In your html use

Alter the heights and widths as you see fit.

answered Nov 13, 2015 at 10:21 47 1 1 bronze badge @guidomocha Don't just comment that, provide reasoning as to why this is a bad approach. Commented Apr 7, 2017 at 11:34

this approach will display the document text without background graphics, header , footer and other elements.for long files with different elements positioning saving as web page will ruin the design.

Commented Sep 6, 2020 at 3:07

If you wanted to pre-process your DOCX files, rather than waiting until runtime you could convert them into HTML first by using a file conversion API such as Zamzar. You could use the API to programatically convert from DOCX to HMTL, save the output to your server and then serve that HTML up to your end users.

Conversion is pretty easy:

curl https://api.zamzar.com/v1/jobs \ -u API_KEY: \ -X POST \ -F "[email protected]" \ -F "target_format=html5"

This would remove any runtime dependencies on Google & Microsoft's services (for example if they were down, or you were rate limited by them).

It also has the benefit that you could extend to other filetypes if you wanted (PPTX, XLS, DOC etc)

answered Nov 10, 2017 at 11:19 Chris Whyley Chris Whyley 492 2 2 silver badges 8 8 bronze badges

Native Documents (in which I have an interest) makes a viewer (and editor) specifically for Word documents (both legacy binary .doc and modern docx formats). It does so without lossy conversion to HTML. Here's how to get started https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

answered Jan 22, 2019 at 21:42 JasonPlutext JasonPlutext 15.7k 4 4 gold badges 47 47 silver badges 84 84 bronze badges It doesn't have any information on pricing. Is the 'Word File Editor/Viewer' free? Commented Feb 18, 2019 at 7:00

Its commercial software, but we have a free plan for startups/small business, and for others, a free plan subject to usage limits. We'll publish details soon.

Commented Feb 19, 2019 at 7:30 can this run on a single page serverless eg on aws s3? Commented Apr 6, 2019 at 0:57

server-side we package it as Docker containers you'd need to run somewhere (eg ECS). (In principle we could run some of this on Lambda, but you'd still want a persistent document store, maybe S3)

Commented Apr 6, 2019 at 21:44

@JasonPlutext This looks interesting. But I'll be blunt: I'm willing to pay a small reasonable fee for a good package or service - but "submit your info and we'll let you know what it costs" is a NO GO.

Commented Jul 1, 2019 at 19:36

PDFTron WebViewer supports rendering of Word (and other Office formats) directly in any browser and without any server side dependencies. To test, try https://www.pdftron.com/webviewer/demo

answered Sep 3, 2020 at 20:31 410 2 2 silver badges 14 14 bronze badges It needs paid license to fully use it Commented Jul 14, 2021 at 15:04

You can also use some existing API's like GroupDocs.Viewer which can convert your document into image or html and then you will be able to display it in your own application.

answered Sep 9, 2020 at 11:16 Dovlet Mamenov Dovlet Mamenov 591 1 1 gold badge 7 7 silver badges 20 20 bronze badges It needs paid license to fully use it Commented Jul 14, 2021 at 15:04

enter image description here

Microsoft users will have a Word Browser within Explorer, however Internet Explorer Office Word Plugin is now way past End of Life.

Others have mentioned in answers that for remote files you can use newer 365 MS Web File Viewer as Object Link / Embed such as per click this snippet

This is an embedded Microsoft Office document, powered by Office.

enter image description here

And there are Hybrid WordPad/OpenOffice/Jsview Open Document Template/Text format as a secondary alternative.

However The only way to support the proprietary parts of a DocX are to use an MSOffice Viewer and MS pulled the plug on those too.

Therefor the only really good way to View a complex DocX is once it has been printed as a printout, and the best common format for that is either non searchable image or as searchable SAVE AS PDF

answered Apr 6, 2023 at 22:38 11.1k 4 4 gold badges 19 19 silver badges 48 48 bronze badges

There is an android file manager MiXplorer which has features an "HTML Viewer" ( ContentViewerActivity ) which can display the contents of various docx files pretty well.
It works offline, is available for gratis, and setup weighs only ~4 MB (as of latest v6.61.7)
It doesn't show exact same thing, rather gives more like a reader view for the files.
But since it preserves these:
- elements: images, tables, lists
- formatting: font color, & font weight. I guess font size too.
I haven't yet found any desktop counterpart.

I am sharing it here in hopes that maybe this can poke someone's interest to figure out how it does that and make is possible on desktop.

If such a light weight html viewer on android can render it (albeit not fully), then it certainly is possible on desktop too, just no current implementation exist.
answered Apr 5, 2023 at 20:21 user8395964 user8395964 134 1 1 silver badge 11 11 bronze badges
I found this question when looking to render Word and Excel files seamlessly from the web application I was making. The app allows drag and drop uploads attaching files to whatever record displayed on the page. My approach was to create a protocol handler. I chose woi:// for web office interface. Opening a new window having the web address start with that, invokes an exe. It works for all browsers tested. All that's necessary is to register the exe as a protocol handler, which the exe itself does if invoked with no argument as it prompts whether to register or unregister. If the exe exists on the LAN it first copies itself to %userprofile%\AppData\Roaming\web_office_invoker and registers from there.

If the user clicks view on a file, if a PDF it immediately streams to a new window with the response header indicating it's a PDF. Browsers render PDF streams natively. If a Word or Excel file, javascript in the client must first query the application and have the application construct a URL using the woi:// protocol, then open the new window using that URL. The window of course never opens after invoking the exe and passing the entire URL to the exe. Embedded in the URL is a key and other info allowing the exe to make a web request to fetch yet another URL. Finally, Word or Excel are opened with that URL as a command line argument. Word or Excel then makes a request to that URL and the application serves out the unaltered byte stream of the original file that was uploaded. This works perfectly and is totally seamless.

Using Word online is not secure because the document may contain sensitive information, and to use Word online the document would have to be transmitted to Microsoft's server for rendering. This method uses executables installed on the workstation. Also, scripts can be run against Word and Excel documents pulled from the server having replaceable text, to then produce filled out forms.