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

146

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.

Pankaj
fuente
puede usar syncfusion-document-editor en reaccionar para mostrar y editar archivos docx
Yusuf Mohammad

Respuestas:

225

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

Brandon Anzaldi
fuente
2
@Pankaj No tiene que subirlo a Google Drive. Simplemente puede cambiar el urlparámetro a la URL completa del archivo .doc, alojado en su servidor o en cualquier lugar al que se pueda vincular directamente. Google Docs maneja la conversión a un formato que pueda ser manejado por el navegador sobre la marcha, y no requiere que se cargue o almacene en Google Docs, sino que realiza una solicitud del lado del servidor para tomar el archivo.
Brandon Anzaldi
3
@Pankaj Incluso si está alojando un servidor local, Google no puede acceder localhost. Necesita una URL de acceso público. Podría usar un servicio de reenvío básico como Finch .
Brandon Anzaldi
11
También puede usar el visor de aplicaciones en vivo de Office: //view.officeapps.live.com/op/embed.aspx?src=your_url_aquí ponga esta url en un iframe
fatbotdesigns
1
@BonifacePereira Si está configurando una intranet, probablemente tendrá que hacer alguna conversión localmente, ya que GDocs y Live tendrían que buscar el documento desde algún lugar. Si puede, puede configurar un servidor para la conversión con OpenOffice o algo así: stackoverflow.com/questions/5538584/…
Brandon Anzaldi
18
Solo quiero señalar que ambos métodos definitivamente cargan los archivos en los servidores de Google y Microsoft. Si está tratando con información confidencial que debería tener acceso limitado, no lo haga. Use la solución alternativa con PDF.js para generar una versión en PDF del archivo para ver en el navegador y ofrecer un enlace para descargar las diversas versiones de Excel / doc.
lightswitch05
30

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' 
Kernelmann
fuente
1
¿Hay alguna restricción para usar esto? support.microsoft.com/en-us/help/2769380/…
Vishnu
para proporcionar una narrativa contraria: elegimos la versión de Google porque el procesador de Microsoft tarda mucho más en cargarse en Chrome y FF
David Holiday
13

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

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.

ccpizza
fuente
1
Notaré que mi biblioteca está completamente sin mantenimiento. Fue capaz de convertir archivos docx a algo que se podía representar en el navegador. Ya no sé si esto es cierto.
artburkart
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.

Cai Esson
fuente
66
@guidomocha No solo comente eso, proporcione un razonamiento de por qué este es un mal enfoque.
J. Louw
2

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

NaveenDA
fuente
¿Puedo usar el enlace url de aws s3
Vishnu
No, solo proporciona un enlace local
NaveenDA
1
Gracias por su respuesta
Vishnu
Desafortunadamente, en mi contexto, los formatos de Microsoft están más extendidos.
guettli
1

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

JasonPlutext
fuente
2
No tiene ninguna información sobre precios. ¿Es gratuito el 'Editor / Visor de archivos de Word'?
FiringBlanks
Es un software comercial, pero tenemos un plan gratuito para nuevas empresas / pequeñas empresas, y para otros, un plan gratuito sujeto a límites de uso. Publicaremos detalles pronto.
JasonPlutext
¿Se puede ejecutar esto en una sola página sin servidor, por ejemplo, en aws s3?
Graham Chiu
del lado del servidor lo empaquetamos como contenedores Docker que necesitaría ejecutar en algún lugar (por ejemplo, ECS). (En principio, podríamos ejecutar algo de esto en Lambda, pero aún querría un almacén de documentos persistente, tal vez S3)
JasonPlutext
3
@JasonPlutext Esto parece interesante. Pero seré franco: estoy dispuesto a pagar una pequeña tarifa razonable por un buen paquete o servicio, pero "envíe su información y le informaremos lo que cuesta" es un NO .
manassehkatz-Moving 2 Codidact 01 de
0

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

Chris Whyley
fuente