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


146

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.



você pode usar o syncfusion-document-editor em reagir para mostrar e editar arquivos docx
Yusuf Mohammad

Respostas:


225

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


2
@Pankaj Você não precisa fazer o upload para o Google Drive. Você pode simplesmente alterar o urlparâmetro para a URL completa do arquivo .doc, hospedado no servidor ou em qualquer lugar ao qual possa ser diretamente vinculado. O Google Docs lida com a conversão para um formato que pode ser manipulado pelo navegador em tempo real e não exige que ele seja carregado ou armazenado no Google Docs, mas sim executando uma solicitação do servidor para obter o arquivo.
Brandon Anzaldi

3
@Pankaj Mesmo se você estiver hospedando um servidor local, o Google não poderá acessar localhost. Ele precisa de um URL acessível ao público. Você pode usar um serviço de encaminhamento básico como Finch .
precisa saber é o seguinte

11
Você também pode usar o escritório de aplicativos Live Viewer: //view.officeapps.live.com/op/embed.aspx?src=your_url_here colocar essa URL em um iframe
fatbotdesigns

1
@BonifacePereira Se você estiver configurando uma intranet, provavelmente precisará fazer algumas conversões localmente, já que o GDocs e o Live precisariam buscar o documento em algum lugar. Se você é capaz de, você pode ser capaz de configurar um servidor para a conversão com o OpenOffice ou algo: stackoverflow.com/questions/5538584/...
Brandon Anzaldi

18
Só quero ressaltar que esses dois métodos definitivamente carregam os arquivos nos servidores do Google e da Microsoft. Se você estiver lidando com informações confidenciais que deveriam ter acesso limitado, não faça isso. Use a solução alternativa com o PDF.js para gerar uma versão em PDF do arquivo para exibição no navegador e oferecer um link para baixar as várias versões do Excel / doc.
precisa saber é o seguinte

30

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' 

1
Existe alguma restrição para usar isso? support.microsoft.com/en-us/help/2769380/…
Vishnu

para fornecer um contador de narrativa - escolhemos a versão google porque o renderizador Microsoft leva muito mais tempo para carga em ambos os cromados e ff
David férias

13

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

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


1
Observarei que minha biblioteca está completamente sem manutenção. Foi capaz de converter arquivos docx para algo que poderia ser renderizado no navegador. Não sei mais se isso é verdade.
Artburkart #

2

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.


6
@ guidomocha Não apenas comente isso, forneça um raciocínio sobre por que essa é uma abordagem ruim.
11277 J. Louw

2

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


Devo capaz de usar o link url da AWS S3
Vishnu

Não, você fornece apenas o link local
NaveenDA 15/02

1
Obrigado pela sua resposta
Vishnu

Infelizmente, no meu contexto, os formatos da Microsoft são mais difundidos.
guettli

1

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


2
Não possui informações sobre preços. O 'Word File Editor / Viewer' é gratuito?
FiringBlanks

É um software comercial, mas temos um plano gratuito para startups / pequenas empresas e, para outros, um plano gratuito sujeito a limites de uso. Publicaremos detalhes em breve.
JasonPlutext 19/02/19

isso pode ser executado em uma única página sem servidor, por exemplo, no aws s3?
Graham Chiu

do lado do servidor, empacotamos como contêineres do Docker que você precisa executar em algum lugar (por exemplo, ECS). (Em princípio, poderíamos executar alguns dos isso em Lambda, mas você ainda quer um armazenamento de documentos persistente, talvez S3)
JasonPlutext

3
@JasonPlutext Isso parece interessante. Mas vou ser franco: estou disposto a pagar uma pequena taxa razoável por um bom pacote ou serviço - mas "envie suas informações e informaremos quanto custa" é NÃO-GO .
codidact

0

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 "source_file=@my.docx" \
-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.)

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.