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

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

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

Derzeit verfügen keine Browser über den zum Rendern von Word-Dokumenten erforderlichen Code, und meines Wissens gibt es derzeit auch keine clientseitigen Bibliotheken zum Rendern dieser Dokumente.

Wenn Sie das Word-Dokument jedoch nur anzeigen, aber nicht bearbeiten müssen, können Sie den Viewer von Google Documents über ein verwenden <iframe>, um ein remote gehostetes .doc/ anzuzeigen .docx.

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

Lösung angepasst aus " So zeigen Sie ein Word-Dokument mit Fancybox an ".

Beispiel:

JSFiddle

Wenn Sie jedoch lieber native Unterstützung in den meisten, wenn nicht allen Browsern haben möchten, würde ich empfehlen, die Datei .doc/ .docxals PDF-Datei erneut zu speichern. Diese können auch unabhängig mit PDF.js von Mozilla gerendert werden .

Bearbeiten:

Vielen Dank an fatbotdesigns für die Veröffentlichung 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, dass Ihr Dokument auf einen Server eines Drittanbieters hochgeladen wird. Wenn dies nicht akzeptabel ist, ist diese Anzeigemethode nicht die richtige Vorgehensweise.

Live-Beispiele:

Google Text & Tabellen-Viewer

Microsoft Office Viewer

Die Antworten von Brandon und fatbotdesigns sind beide korrekt, aber nachdem wir die Vorschau der Google-Dokumente implementiert haben, haben wir mehrere DOCX-Dateien gefunden, die von Google nicht verarbeitet werden konnten. Zur MS Office Online-Vorschau gewechselt und funktioniert wie ein Zauber.

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

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

Es scheint einige js-Bibliotheken zu geben, die die clientseitige Konvertierung von .docx (nicht .doc) in HTML (in keiner bestimmten Reihenfolge) verarbeiten können:

• https://github.com/lalalic/docx2html - docx bis html, die meisten Elemente werden unterstützt

• https://github.com/mwilliamson/mammoth.js - unterstützt Überschriften, Listen, Tabellen, Endnoten, Fußnoten, Bilder und Textfelder

• https://www.npmjs.com/package/docx2html - Konvertiert DOCX-Dokumente im Browser oder in nodejs in HTML

• https://github.com/artburkart/docx2html - funktioniert anscheinend im Browser

^{Hinweis: Wenn Sie nach der besten Möglichkeit suchen, eine doc / docx-Datei auf der Clientseite zu konvertieren, lautet die Antwort wahrscheinlich: Tun Sie es nicht . Wenn Sie es wirklich tun müssen, dann tun Sie es serverseitig, dh mit libreoffice im Headless-Modus , Apache-Poi (Java) , Pandoc oder einer anderen Bibliothek, die für Sie am besten geeignet ist .}

Ich glaube ich habe eine Idee. Dies hat mich auch verrückt gemacht und ich habe immer noch Probleme, es in Chrome anzuzeigen.

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

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

Ändern Sie die Höhen und Breiten nach Belieben.

ViewerJS ist hilfreich, um Openoffice-Formate wie odt, odp, ods und auch pdf anzuzeigen / einzubetten.

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, den Sie einbetten möchten

Native Documents (an denen ich interessiert bin) erstellt einen Viewer (und Editor) speziell für Word-Dokumente (sowohl ältere binäre DOC- als auch moderne DocX-Formate). Dies geschieht ohne verlustbehaftete Konvertierung in HTML. Hier erfahren Sie, wie Sie beginnen: https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

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

Die Konvertierung ist ziemlich einfach:

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

Dies würde alle Laufzeitabhängigkeiten von den Diensten von Google und Microsoft beseitigen (z. B. wenn sie nicht verfügbar waren oder Sie durch diese eingeschränkt wurden).

Es hat auch den Vorteil, dass Sie es auf andere Dateitypen erweitern können, wenn Sie möchten (PPTX, XLS, DOC usw.)