Como renderizo um documento do Word (.doc, .docx) no navegador usando JavaScript?

Fiz com êxito o código para exibir um arquivo PDF no navegador, em vez da caixa de diálogo "Abrir / Salvar". Agora, estou preso tentando exibir um documento do Word no navegador. Quero exibir um documento do Word no Firefox, IE7 +, Chrome etc.

Alguém pode ajudar? Estou sempre recebendo a caixa de diálogo "Abrir / Salvar" enquanto exibe o documento do Word no navegador. Quero implementar essa funcionalidade usando JavaScript.

Atualmente, nenhum navegador possui o código necessário para renderizar documentos do Word e, até onde eu sei, não existem bibliotecas do lado do cliente para renderizá-las.

No entanto, se você precisar exibir apenas o documento do Word, mas não precisar editá-lo, poderá usar o Visualizador de documentos do Google por meio de um <iframe>para exibir um .doc/ hospedado remotamente .docx.

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

Solução adaptada de " Como exibir um documento do Word usando o fancybox ".

Exemplo:

JSFiddle

No entanto, se você preferir ter suporte nativo, na maioria, se não em todos os navegadores, recomendo salvar novamente o .doc/ .docxcomo um arquivo PDF. Esses arquivos também podem ser renderizados independentemente usando o PDF.js da Mozilla.

Editar:

Muito obrigado a fatbotdesigns por postar o visualizador do Microsoft Office 365 nos comentários.

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

Uma ressalva mais importante a ser lembrada, como apontado pelo lightswitch05 , é que isso fará o upload do seu documento para um servidor de terceiros. Se isso é inaceitável, esse método de exibição não é o curso de ação adequado.

Exemplos ao vivo:

Visualizador do Google Docs

Visualizador do Microsoft Office

As respostas de Brandon e fatbotdesigns estão corretas, mas, após a implementação da visualização de documentos do Google, encontramos vários arquivos .docx que não podiam ser manipulados pelo Google. Mudou para a visualização do MS Office Online e funciona como um encanto.

Minha recomendação seria usar o URL de visualização do MS Office sobre o Google.

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

Parece haver algumas bibliotecas js que podem manipular .docx (não .doc) para conversão de html do lado do cliente (em nenhuma ordem específica):

• https://github.com/lalalic/docx2html - docx para html, a maioria dos elementos é suportada

• https://github.com/mwilliamson/mammoth.js - suporta títulos, listas, tabelas, notas de fim, notas de rodapé, imagens e caixas de texto

• https://www.npmjs.com/package/docx2html - Converte documentos DOCX para HTML no navegador ou nodejs

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

^{Nota: Se você está procurando a melhor maneira de converter um arquivo doc / docx no lado do cliente, provavelmente a resposta é não fazê-lo . Se você realmente precisar fazer isso, faça-o no servidor, ou seja, com o libreoffice no modo sem cabeça , apache-poi (java) , pandoc ou qualquer outra biblioteca que funcione melhor para você.}

Eu acho que tenho uma ideia. Isso também está me deixando louco e ainda estou tendo problemas para exibi-lo no Chrome.

Salvar documento (name.docx) no word como página da web de arquivo único (name.mht) Em seu html, use

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

Altere as alturas e larguras como achar melhor.

O ViewerJS é útil para visualizar / incorporar o formato openoffice como odt, odp, ods e também pdf.

Para incorporar documento openoffice / pdf

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

/ViewerJS/ é o caminho do ViewerJS

#../demo/ohm2013 é o caminho do seu arquivo que deseja incorporar

Documentos nativos (nos quais tenho interesse) cria um visualizador (e editor) especificamente para documentos do Word (formatos binários legados .doc e docx modernos). Faz isso sem conversão com perda para HTML. Eis como começar https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

Se você quiser pré-processar seus arquivos DOCX, em vez de esperar até o tempo de execução, poderá convertê-los primeiro em HTML usando uma API de conversão de arquivos como o Zamzar . Você pode usar a API para converter programaticamente de DOCX para HMTL, salvar a saída em seu servidor e servir esse HTML para seus usuários finais.

A conversão é bem fácil:

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

Isso removeria todas as dependências de tempo de execução dos serviços do Google e da Microsoft (por exemplo, se elas estavam inativas ou se você era limitado por elas).

Também possui o benefício de que você pode estender a outros tipos de arquivos, se desejar (PPTX, XLS, DOC, etc.)