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


Ich habe Code erfolgreich ausgeführt, um eine PDF-Datei im Browser anstelle des "Öffnen / Speichern" -Dialogs anzuzeigen. Jetzt stehe ich fest und versuche, ein Word-Dokument im Browser anzuzeigen. Ich möchte ein Word-Dokument in Firefox, IE7 +, Chrome usw. anzeigen.

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


75
2018-01-15 06:18


Ursprung


Antworten:


Derzeit haben keine Browser den Code, der zum Rendern von Word-Dokumenten erforderlich ist. Soweit ich weiß, gibt es keine clientseitigen Bibliotheken, die derzeit für die Wiedergabe von Word-Dokumenten vorhanden sind.

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

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

Lösung angepasst von "Wie man ein Word-Dokument mit fancybox anzeigt".

Beispiel:

JSFidel

Wenn Sie jedoch native Unterstützung bevorzugen, würde ich in den meisten, wenn nicht in allen Browsern, die erneute Speicherung empfehlen .doc/.docx als PDF-Datei Diese können auch unabhängig voneinander gerendert werden PDF.js von Mozilla.

Bearbeiten:

Vielen Dank an fatbotdesigns um den Microsoft Office 365 Viewer in den Kommentaren zu veröffentlichen.

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

Ein weiterer wichtiger Vorbehalt, wie von Lichtschalter05, ist, dass dies Ihr Dokument auf einen Drittanbieter-Server hochladen wird. Wenn dies nicht akzeptabel ist, ist diese Darstellungsmethode nicht die richtige Vorgehensweise.

Live Beispiele:

Google Text & Tabellen-Viewer

Microsoft Office Viewer


130
2018-01-15 06:56



Die Antworten von Brandon und fatbotdesigns sind beide korrekt, aber nachdem wir die Google Docs-Vorschau implementiert hatten, fanden wir mehrere .docx-Dateien, die von Google nicht verarbeitet werden konnten. In die MS Office Online-Vorschau geschaltet und funktioniert 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' 

18
2018-03-17 12:25



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

Hinweis: Wenn Sie nach dem besten Weg suchen, eine doc / docx-Datei auf der Client-Seite zu konvertieren, dann ist wahrscheinlich die Antwort mach es nicht. Wenn Sie es wirklich tun müssen, tun Sie es serverseitig, d. H. Mit libreoffice im kopflosen Modus, apache-poi oder was auch immer andere Bibliothek für Sie am besten funktioniert.


4
2017-09-20 07:31



ZuschauerJS 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 deiner Datei einzubetten?


1
2017-09-21 09:54



Ich denke, ich habe eine Idee. Das hat auch meinen Mut gemacht und ich habe immer noch Probleme, es in Chrome anzuzeigen.

Speichern Sie das Dokument (name.docx) im Wort als einzelne Dateiwebseite (name.mht) In Ihrem HTML-Gebrauch

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

Ändern Sie die Höhen und Breiten, wie Sie es für richtig halten.


0
2017-11-13 10:21



Wenn Sie Ihre DOCX-Dateien vorverarbeiten möchten, anstatt auf die Laufzeit zu warten, können Sie sie zuerst in HTML konvertieren, indem Sie eine Dateikonvertierungs-API wie z Zamzar. Sie können die API für die programmatische Konvertierung von DOCX zu HMTL verwenden, die Ausgabe auf Ihrem Server speichern und dann Ihren Endbenutzern diesen HTML-Code bereitstellen.

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 jegliche Laufzeitabhängigkeiten von den Diensten von Google & Microsoft entfernen (zum Beispiel, wenn sie nicht verfügbar waren oder wenn die Rate von ihnen begrenzt wurde).

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


0
2017-11-10 11:19