docx viewer javascript

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

Question

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.

Answer 1

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 / .docx alojado de forma remota.

<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 / .docx como un archivo PDF. Esos archivos también pueden ser renderizados independientemente usando PDF.js por Mozilla.

Editar:

fatbotdesigns 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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

Parece que hay algunas bibliotecas js que pueden manejar la conversión de .docx (no .doc) a 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.}

Answer 6

Si desea preprocesar sus archivos DOCX, en lugar de esperar hasta el tiempo de ejecución, puede convertirlos primero 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 cualquier dependencia de tiempo de ejecución en los servicios de Google y Microsoft (por ejemplo, si estuvieran inactivos, o si tu tarifa estuviera limitada por ellos).

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

Answer 7

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 la ruta de acceso de ViewerJS

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