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

146

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.

Pankaj
quelle
Sie können den Syncfusion-Dokument-Editor verwenden, um auf das Anzeigen und Bearbeiten von DocX-Dateien zu reagieren
Yusuf Mohammad

Antworten:

224

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

Brandon Anzaldi
quelle
2
@Pankaj Sie müssen es nicht auf Google Drive hochladen. Sie können den urlParameter einfach in die vollständige URL der DOC-Datei ändern , die entweder auf Ihrem Server gehostet wird oder mit der er direkt verknüpft werden kann. Google Text & Tabellen übernimmt die Konvertierung in ein Format, das vom Browser im laufenden Betrieb verarbeitet werden kann, und erfordert nicht, dass es hochgeladen oder in Google Text & Tabellen gespeichert wird. Stattdessen wird eine serverseitige Anforderung zum Abrufen der Datei ausgeführt.
Brandon Anzaldi
3
@Pankaj Auch wenn Sie einen lokalen Server hosten, kann Google nicht darauf zugreifen localhost. Es benötigt eine öffentlich zugängliche URL. Sie könnten einen grundlegenden Weiterleitungsdienst wie Finch verwenden .
Brandon Anzaldi
11
Sie können auch den Office Live Apps Viewer verwenden: //view.officeapps.live.com/op/embed.aspx?src=your_url_here diese URL in einen
Iframe einfügen
1
@BonifacePereira Wenn Sie ein Intranet einrichten, müssen Sie wahrscheinlich eine lokale Konvertierung durchführen, da GDocs und Live das Dokument von irgendwoher abrufen müssten. Wenn Sie in der Lage sind, können Sie möglicherweise einen Server für die Konvertierung mit OpenOffice oder etwas anderem einrichten
Brandon Anzaldi
18
Ich möchte nur darauf hinweisen, dass beide Methoden die Dateien definitiv auf die Server von Google und Microsoft hochladen. Wenn Sie mit vertraulichen Informationen arbeiten, die nur eingeschränkten Zugriff haben sollten, tun Sie dies nicht. Verwenden Sie die alternative Lösung mit PDF.js, um eine PDF-Version der Datei zu generieren, die im Browser angezeigt werden soll, und bieten Sie einen Link zum Herunterladen der verschiedenen Excel- / Doc-Versionen an.
Lichtschalter05
30

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' 
Kernelmann
quelle
1
Gibt es eine Einschränkung, um dies zu verwenden? support.microsoft.com/en-us/help/2769380/…
Vishnu
Um eine Gegenerzählung zu liefern, haben wir uns für die Google-Version entschieden, da das Laden des Microsoft-Renderers in Chrome und ff viel länger dauert
David Holiday,
13

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

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 .

ccpizza
quelle
1
Ich werde feststellen, dass meine Bibliothek völlig unbeaufsichtigt ist. Es war in der Lage, docx-Dateien in etwas zu konvertieren, das im Browser gerendert werden konnte. Ich weiß nicht mehr, ob das stimmt.
Artburkart
2

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.

Cai Esson
quelle
6
@guidomocha Kommentieren Sie das nicht nur, sondern begründen Sie, warum dies ein schlechter Ansatz ist.
J. Louw
2

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

NaveenDA
quelle
Soll ich die Link-URL von aws s3
Vishnu
Nein, Sie bieten nur lokalen Link
NaveenDA
1
Vielen Dank für Ihre Antwort
Vishnu
Leider sind in meinem Kontext Microsoft-Formate weiter verbreitet.
Guettli
1

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

JasonPlutext
quelle
2
Es gibt keine Informationen zur Preisgestaltung. Ist der 'Word File Editor / Viewer' kostenlos?
FiringBlanks
Es ist kommerzielle Software, aber wir haben einen kostenlosen Plan für Startups / kleine Unternehmen und für andere einen kostenlosen Plan, der Nutzungsbeschränkungen unterliegt. Wir werden bald Details veröffentlichen.
JasonPlutext
Kann dies auf einer einzelnen Seite ohne Server ausgeführt werden, z. B. auf aws s3?
Graham Chiu
serverseitig verpacken wir es als Docker-Container, die Sie irgendwo ausführen müssen (z. B. ECS). (Im Prinzip könnten wir einiges davon auf Lambda ausführen, aber Sie möchten immer noch einen dauerhaften Dokumentenspeicher, vielleicht S3)
JasonPlutext
3
@ JasonPlutext Das sieht interessant aus. Aber ich werde stumpf sein: Ich bin bereit, eine kleine angemessene Gebühr für ein gutes Paket oder eine gute Dienstleistung zu zahlen - aber "Senden Sie Ihre Informationen und wir werden Sie wissen lassen, was es kostet" ist ein NO GO .
Manassehkatz-Moving 2 Codidact
0

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 "[email protected]" \
-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.)

Chris Whyley
quelle