it-swarm.com.de

Wie rendere ich ein Word-Dokument (.doc, .docx) im Browser mithilfe von JavaScript?

Ich habe erfolgreich Code erstellt, um eine PDF -Datei anstelle des Dialogfelds "Öffnen/Speichern" im Browser anzuzeigen. Nun versuche ich, ein Word-Dokument im Browser anzuzeigen. Ich möchte ein Word-Dokument in Firefox, IE7 +, Chrome usw. anzeigen.

Kann jemand helfen? Ich erhalte immer den "Öffnen/Speichern" -Dialog, während das Word-Dokument im Browser angezeigt wird. Ich möchte diese Funktionalität mit JavaScript implementieren.

94
Pankaj

Derzeit verfügt kein Browser über den Code, der zum Rendern von Word-Dokumenten erforderlich ist, und meines Wissens gibt es auch keine clientseitigen Bibliotheken, mit denen diese gerendert werden können.

Wenn Sie das Word-Dokument jedoch nur anzeigen, aber nicht bearbeiten müssen, können Sie den Google Documents Viewer über ein <iframe> zum Anzeigen eines remote gehosteten .doc/.docx.

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

Lösung angepasst von " So zeigen Sie ein Word-Dokument mit fancybox an ".

Beispiel:

JSFiddle

Wenn Sie jedoch eher native Unterstützung wünschen, würde ich in den meisten, wenn nicht allen Browsern, empfehlen, das .doc/.docx als PDF file Diese können auch mit PDF.js von Mozilla unabhängig gerendert werden.

Bearbeiten:

Vielen Dank an fatbotdesigns für das Posten des Microsoft Office 365-Viewers in den Kommentaren.

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

Eine weitere wichtige Einschränkung, die Sie beachten sollten, ist, wie durch lightswitch05 hervorgehoben, dass dadurch Ihr Dokument auf einen Server eines Drittanbieters hochgeladen wird. Wenn dies nicht akzeptabel ist, ist diese Anzeigemethode nicht die richtige Vorgehensweise.

Live-Beispiele:

Google Docs Viewer

Microsoft Office Viewer

192
Brandon Anzaldi

Die Antworten von Brandon und fatbotdesigns sind beide richtig, aber nachdem wir die Google Docs-Vorschau implementiert haben, haben wir mehrere .docx-Dateien gefunden, die von Google nicht verarbeitet werden konnten. Zur MS Office Online-Vorschau gewechselt und wirkt wie ein Zauber.

Meine Empfehlung wäre, die MS Office Preview-URL über Google zu verwenden.

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

Es scheint, dass es einige js-Bibliotheken gibt, die die Konvertierung von .docx (nicht .doc) in die HTML-Konvertierung auf der Clientseite (in keiner bestimmten Reihenfolge) ausführen können:

Hinweis: Wenn Sie auf der Clientseite nach der besten Methode zum Konvertieren einer doc/docx-Datei suchen, lautet die Antwort wahrscheinlich do do. Wenn Sie es wirklich tun müssen, dann machen Sie es serverseitig, d. H. Mit libreoffice im Headless-Modus , Apache-poi (Java) , pandoc oder welche andere Bibliothek für Sie am besten geeignet ist. 

5
ccpizza

Native Documents (für die ich ein Interesse habe) machen einen Viewer (und einen Editor) speziell für Word-Dokumente (sowohl ältere binäre DOC- als auch moderne Docx-Formate). Dies erfolgt ohne verlustbehaftete Konvertierung in HTML. Es gibt eine Online-Demo, in der Sie Ihr eigenes Dokument ausprobieren können.

1
JasonPlutext

ViewerJS ist hilfreich zum Anzeigen/Einbetten von Openoffice-Formaten wie odt, odp, ods und auch pdf.

Zum Einbetten von openoffice/pdf-Dokumenten

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

/ViewerJS/ ist der Pfad von ViewerJS

#../demo/ohm2013 ist der Pfad Ihrer Datei, die Sie einbetten möchten

1
NaveenDA

Ich glaube, ich habe eine Idee ... Dies hat auch meine Nuss erledigt und ich habe immer noch Probleme damit, sie in Chrome anzuzeigen.

Speichern Sie das Dokument (name.docx) in Word als einzelne Datei-Webseite (name.mht) Verwenden Sie es in Ihrer HTML-Datei

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

Ändern Sie die Höhen und Breiten nach Ihren Wünschen.

0
Cai Esson

Wenn Sie Ihre DOCX-Dateien vorverarbeiten möchten, anstatt sie bis zur Laufzeit zu warten, können Sie sie zuerst in HTML konvertieren, indem Sie eine Dateikonvertierungs-API wie Zamzar verwenden. Sie können die API verwenden, um programmgesteuert von DOCX in HMTL zu konvertieren, die Ausgabe auf Ihrem Server zu speichern und dieses HTML dann Ihren Endbenutzern bereitzustellen.

Die Konvertierung ist ziemlich einfach:

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

Dadurch werden Laufzeitabhängigkeiten in den Diensten von Google und Microsoft entfernt (z. B. wenn sie inaktiv waren oder wenn die Rate von ihnen eingeschränkt wurde).

Es hat auch den Vorteil, dass Sie sich auf andere Dateitypen erweitern könnten wenn Sie wollten (PPTX, XLS, DOC etc)

0
Chris Whyley