How do I render a Word document doc docx in the browser using JavaScript

Question

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

User · Answer

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'

User · Answer

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

User · Answer

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   lt iframe src   name mht  width  100   height  800  gt   lt  iframe gt    Alter the heights and widths as you see fit

User · Answer

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

User · Answer

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  source file  my docx    -F  target format html5    This would remove any runtime dependencies on Google  amp  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

User · Answer

Use Libre Office API Here is an example libreoffice --headless  --convert-to html docx-file-path --outdir html-dir-path

User · Answer

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

User · Answer

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  lt iframe gt  to display a remotely hosted  doc  docx    lt iframe src  https   docs google com gview url http   remote url tld path to document doc amp embedded true  gt  lt  iframe gt    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 fatbotdesigns for posting the Microsoft Office 365 viewer in the comments    lt 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  gt This is an embedded  lt a target   blank  href  http   office com  gt Microsoft Office lt  a gt  document  powered by  lt a target   blank  href  http   office com webapps  gt Office Online lt  a gt   lt  iframe gt    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

User · Answer

There seem to be some js libraries that can handle  docx  not  doc  to html conversion client-side  in no particular order     https   github com lalalic docx2html     docx to html  most elements are supported https   github com mwilliamson mammoth js     supports headings  lists  tables  endnotes  footnotes  images and text boxes https   www npmjs com package docx2html     Converts DOCX documents to HTML in the browser or nodejs 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 or whatever other library works best for you

User · Answer

ViewerJS is helpful to view embed openoffice format like odt odp ods and also pdf  For embed openoffice pdf document  lt iframe src    quot  ViewerJS     demo ohm2013 odp quot  width  700  height  550  allowfullscreen webkitallowfullscreen gt  lt  iframe gt    ViewerJS  is the path of ViewerJS     demo ohm2013 is the path of your file want to embed

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

Examples related to javascript

Examples related to browser

Examples related to ms-word