Come si esegue il rendering di un documento Word (.doc, .docx) nel browser utilizzando JavaScript?

Ho eseguito correttamente il codice per visualizzare un file PDF nel browser anziché la finestra di dialogo "Apri / Salva". Ora, sono bloccato cercando di visualizzare un documento di Word nel browser. Voglio visualizzare un documento Word in Firefox, IE7 +, Chrome ecc.

Qualcuno può aiutare? Ricevo sempre la finestra di dialogo "Apri / Salva" mentre visualizzo il documento Word nel browser. Voglio implementare questa funzionalità usando JavaScript.

Nessun browser attualmente dispone del codice necessario per il rendering dei documenti di Word e, per quanto ne so, non esistono attualmente librerie sul lato client per il rendering.

Tuttavia, se hai solo bisogno di visualizzare il documento Word, ma non è necessario modificarlo, puoi utilizzare il Visualizzatore di documenti Google tramite un <iframe>per visualizzare un host ospitato in remoto .doc/ .docx.

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

Soluzione adattata da " Come visualizzare un documento di Word usando fancybox ".

Esempio:

JSFiddle

Tuttavia, se preferisci avere il supporto nativo, nella maggior parte, se non in tutti i browser, ti consiglio di salvare nuovamente il .doc/ .docxcome file PDF. Questi possono anche essere resi indipendentemente usando PDF.js da Mozilla.

Modificare:

Enorme grazie a fatbotdesigns per aver pubblicato il visualizzatore di Microsoft Office 365 nei commenti.

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

Un altro avvertimento importante da tenere a mente, come sottolineato da lightswitch05 , è che questo caricherà il tuo documento su un server di terze parti. Se ciò è inaccettabile, questo metodo di visualizzazione non è il modo corretto di agire.

Esempi dal vivo:

Visualizzatore di Google Documenti

Visualizzatore di Microsoft Office

Le risposte di Brandon e fatbotdesigns sono entrambe corrette, ma avendo implementato l'anteprima dei documenti di Google, abbiamo trovato più file .docx che non potevano essere gestiti da Google. Passato all'anteprima di MS Office Online e funziona come un fascino.

La mia raccomandazione sarebbe di usare l'URL di anteprima di MS Office su Google.

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

Sembra che ci siano alcune librerie js in grado di gestire .docx (non .doc) in conversione html lato client (in nessun ordine particolare):

• https://github.com/lalalic/docx2html - da docx a html, la maggior parte degli elementi sono supportati

• https://github.com/mwilliamson/mammoth.js - supporta intestazioni, elenchi, tabelle, note di chiusura, note a piè di pagina, immagini e caselle di testo

• https://www.npmjs.com/package/docx2html - Converte i documenti DOCX in HTML nel browser o nodejs

• https://github.com/artburkart/docx2html - apparentemente, funziona nel browser

^{Nota: se stai cercando il modo migliore per convertire un file doc / docx sul lato client, probabilmente la risposta è non farlo . Se hai davvero bisogno di farlo, fallo sul lato server, cioè con libreoffice in modalità senza testa , apache-poi (java) , pandoc o qualsiasi altra libreria che funzioni meglio per te.}

Penso di avere un'idea. Anche questo ha fatto il mio dado e ho ancora problemi a visualizzarlo in Chrome.

Salvare il documento (name.docx) in Word come pagina Web a file singolo (name.mht) nell'uso HTML

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

Modifica le altezze e le larghezze come meglio credi.

ViewerJS è utile per visualizzare / incorporare il formato openoffice come odt, odp, ods e anche pdf.

Per incorporare documento openoffice / pdf

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

/ViewerJS/ è il percorso di ViewerJS

#../demo/ohm2013 è il percorso del tuo file che vuoi incorporare

Native Documents (in cui ho un interesse) crea un visualizzatore (e un editor) specifico per i documenti Word (sia i formati binari .doc legacy sia i moderni documenti docx). Lo fa senza conversione con perdita di dati in HTML. Ecco come iniziare https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

Se desideri preelaborare i tuoi file DOCX, invece di attendere fino al runtime, puoi prima convertirli in HTML utilizzando un'API di conversione di file come Zamzar . È possibile utilizzare l'API per convertire programmaticamente da DOCX in HMTL, salvare l'output sul server e quindi offrire tale HTML agli utenti finali.

La conversione è abbastanza semplice:

curl https://api.zamzar.com/v1/jobs \
-u API_KEY: \
-X POST \
-F "source_file=@my.docx" \
-F "target_format=html5"

Ciò eliminerebbe tutte le dipendenze di runtime dai servizi di Google e Microsoft (ad esempio se erano in calo o se eri limitato da loro).

Ha anche il vantaggio che potresti estendere ad altri tipi di file se lo desideri (PPTX, XLS, DOC ecc.)