¿Cómo renderizo un documento de Word (.doc, .docx) en el navegador usando JavaScript?
He creado con éxito el código para mostrar un archivo PDF en el navegador en lugar del cuadro de diálogo "Abrir/Guardar". Ahora, estoy atascado al intentar 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" mientras muestro el documento de Word en el navegador. Quiero implementar esta funcionalidad usando JavaScript.
Actualmente, ningún navegador tiene el código necesario para renderizar documentos de Word y, hasta donde yo sé, tampoco existen bibliotecas del lado del cliente para renderizarlos.
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 archivo / <iframe>alojado de forma remota ..doc.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 .doc/ .docxcomo un archivo PDF. Estos también se pueden procesar de forma independiente usando PDF.js de Mozilla.
Editar:
Muchas gracias a cubeguerrero 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 lo señala Lightswitch05 , es que esto cargará su documento en 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:
Visor de documentos de Google
Visor de Microsoft Office
Las respuestas de Brandon y fatbotdesigns son correctas, pero después de implementar la vista previa de Google Docs, encontramos varios archivos .docx que Google no pudo manejar. Cambié a la vista previa de MS Office Online y funciona de maravilla.
Mi recomendación sería utilizar la URL de vista previa de MS Office en lugar de la de Google.
https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc'
Hay algunas bibliotecas JS que pueden manejar la conversión de .docx (no .doc) a HTML en el lado del cliente (sin ningún orden en particular):
https://github.com/VolodymyrBaydalka/docxjs : funciona en el navegador, solo docx, algunos diseños complejos pueden estar desactivados; (mantenido activamente) demostración en vivo
https://github.com/lalalic/docx2html ( npm ): docx a html, la mayoría de los elementos son compatibles, funciona en el navegador o nodejs
https://github.com/mwilliamson/mammoth.js : admite encabezados, listas, tablas, notas al final, notas al pie, imágenes y cuadros de texto
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 en el lado del servidor, es decir, con libreoffice en modo sin cabeza , apache-poi (java) , pandoc , etc.
Una gran solución si tus datos son confidenciales
Dado que los documentos son confidenciales, no deben procesarse en recursos de terceros.
Esta solución es de código abierto :
- En el lado del servidor: utilice Gotenberg para convertir archivos de Word y Excel a PDF.
Nota: Gotenberg funciona a las mil maravillas, está basado en el motor LibreOffice. - En la interfaz: es muy fácil renderizar el archivo PDF con javascript. (Puede utilizar bibliotecas como: pdf.js , reaccionar-pdf , etc.)
