¿Cómo renderizo un documento de Word (.doc, .docx) en el navegador usando JavaScript?

He realizado correctamente el código para mostrar un archivo PDF en el navegador en lugar del cuadro de diálogo "Abrir / Guardar". Ahora, estoy atascado tratando de mostrar un documento de Word en el navegador. Quiero mostrar un documento de Word en Firefox, IE7 +, Chrome, etc.

¿Alguien puede ayudar? Siempre aparece el cuadro de diálogo "Abrir / Guardar" al mostrar el documento de Word en el navegador. Quiero implementar esta funcionalidad usando JavaScript.

Actualmente, ningún navegador tiene el código necesario para representar documentos de Word y, que yo sepa, tampoco existen bibliotecas del lado del cliente para representarlos.

Sin embargo, si solo necesita mostrar el documento de Word, pero no necesita editarlo, puede usar el visor de documentos de Google a través de un <iframe>para mostrar un .doc/ alojado de forma remota .docx.

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

Solución adaptada de " Cómo mostrar un documento de Word usando fancybox ".

Ejemplo:

JSFiddle

Sin embargo, si prefiere tener soporte nativo, en la mayoría de los navegadores, si no en todos, le recomiendo volver a guardar el .doc/ .docxcomo un archivo PDF. Esos también pueden ser renderizados independientemente usando PDF.js por Mozilla.

Editar:

Muchas gracias a fatbotdesigns por publicar el visor de Microsoft Office 365 en los comentarios.

<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>

Una advertencia más importante a tener en cuenta, como señala lightswitch05 , es que esto cargará su documento a un servidor de terceros. Si esto es inaceptable, entonces este método de visualización no es el curso de acción adecuado.

Ejemplos en vivo:

Google Docs Viewer

Visor de Microsoft Office

Las respuestas de Brandon y fatbotdesigns son correctas, pero al implementar la vista previa de Google Docs, encontramos múltiples archivos .docx que Google no podía manejar. Cambió a la vista previa de MS Office Online y funciona como un encanto.

Mi recomendación sería utilizar la URL de vista previa de MS Office sobre la de Google.

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

Parece que hay algunas bibliotecas js que pueden manejar .docx (no .doc) a la conversión html del lado del cliente (sin ningún orden en particular):

• https://github.com/lalalic/docx2html - docx a html, la mayoría de los elementos son compatibles

• https://github.com/mwilliamson/mammoth.js : admite encabezados, listas, tablas, notas finales, notas al pie, imágenes y cuadros de texto

• https://www.npmjs.com/package/docx2html - Convierte documentos DOCX a HTML en el navegador o nodejs

• https://github.com/artburkart/docx2html - aparentemente, funciona en el navegador

^{Nota: Si está buscando la mejor manera de convertir un archivo doc / docx en el lado del cliente, entonces probablemente la respuesta sea no hacerlo . Si realmente necesita hacerlo, hágalo del lado del servidor, es decir, con libreoffice en modo sin cabeza , apache-poi (java) , pandoc o cualquier otra biblioteca que funcione mejor para usted.}

Creo que tengo una idea. Esto también me ha vuelto loco y todavía tengo problemas para que se muestre en Chrome.

Guarde el documento (nombre.docx) en Word como página web de un solo archivo (nombre.mht) En su uso de HTML

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

Modifique las alturas y anchos como mejor le parezca.

ViewerJS es útil para ver / incrustar formatos de oficina abierta como odt, odp, ods y también pdf.

Para incrustar documento openoffice / pdf

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

/ViewerJS/ es el camino de ViewerJS

#../demo/ohm2013 es la ruta de su archivo que desea insertar

Native Documents (en el que tengo interés) crea un visor (y editor) específicamente para documentos de Word (tanto en formato binario heredado .doc como en formato moderno docx). Lo hace sin pérdida de conversión a HTML. Aquí se explica cómo comenzar https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

Si desea preprocesar sus archivos DOCX, en lugar de esperar hasta el tiempo de ejecución, primero puede convertirlos a HTML utilizando una API de conversión de archivos como Zamzar . Puede usar la API para convertir programáticamente de DOCX a HMTL, guardar la salida en su servidor y luego entregar ese HTML a sus usuarios finales.

La conversión es bastante fácil:

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

Esto eliminaría las dependencias de tiempo de ejecución de los servicios de Google y Microsoft (por ejemplo, si estuvieran inactivos o si tuvieran una tarifa limitada).

También tiene el beneficio que podría extender a otros tipos de archivos si lo desea (PPTX, XLS, DOC, etc.)