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

Frage erstellt am Mon, Apr 17, 2017 12:00 AM

Ich habe erfolgreich Code zum Anzeigen einer PDF-Datei im Browser anstelle des Dialogfelds "Öffnen /Speichern" ausgeführt. Jetzt stecke ich beim Versuch, ein Word-Dokument im Browser anzuzeigen. Ich möchte ein Word - Dokument in Firefox, IE7 +, Chrome etc.

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.

    
110
  1. 2015-01-15 06: 19: 16Z
7 Antworten                              7                         

Derzeit verfügen keine Browser über den zum Rendern von Word-Dokumenten erforderlichen Code, 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 Viewer von Google Documents über eine <iframe> verwenden, um eine remote gehostete .doc/.docx anzuzeigen.

 
<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, die .doc/.docx als PDF-Datei zu speichern. Diese können auch unabhängig mit PDF.js von Mozilla.

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, auf die lightswitch05 hingewiesen hat, ist das Hochladen Ihres Dokuments in ein Fremdanbieter-Server. Wenn dies nicht akzeptabel ist, ist diese Anzeigemethode nicht die richtige Vorgehensweise.

Live-Beispiele:

Google Text &Tabellen-Viewer

Microsoft Office Viewer

    
183
16.11.2018 05: 15: 49Z
  1. @ Pankaj Sie müssen es nicht auf Google Drive hochladen. Sie können den Parameter url einfach in die vollständige URL der DOC-Datei ändern, die sich entweder auf Ihrem Server befindet oder mit der eine direkte Verknüpfung hergestellt werden kann. Google Text &Tabellen verwaltet die Konvertierung in ein Format, das vom Browser im Handumdrehen verarbeitet werden kann. Es muss nicht hochgeladen oder in Google Text &Tabellen gespeichert werden, sondern es wird eine serverseitige Anforderung zum Abrufen der Datei ausgeführt.
    2015-01-15 08: 09: 32Z
  2. @ Pankaj Auch wenn Sie einen lokalen Server hosten, kann Google nicht auf localhost zugreifen. Es benötigt eine öffentlich zugängliche URL. Sie können einen einfachen Weiterleitungsdienst wie Finch verwenden.
    2015-01-15 08: 41: 50Z
  3. Sie können auch den Office Live-App-Viewer verwenden: //view.officeapps.live.com/op/embed.aspx?src=your_url_here Fügen Sie diese URL in einen Iframe ein
    2016-01-18 09: 36: 38Z
  4. @ BonifacePereira Wenn Sie ein Intranet einrichten, müssen Sie wahrscheinlich eine lokale Konvertierung durchführen, da sowohl GDocs als auch Live das Dokument von irgendwoher abrufen müssten . Wenn Sie dazu in der Lage sind, können Sie möglicherweise einen Server einrichtenfür die Konvertierung mit OpenOffice oder etwas anderem: stackoverflow.com/questions/5538584/…
    2017-07-17 20: 25: 38Z
  5. 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 zu tun haben, auf die Sie nur eingeschränkt zugreifen können, 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.
    2017-09-28 17: 47: 07Z

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

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

 
https://view.officeapps.live.com/op/embed.aspx?src=http://remote.url.tld/path/to/document.doc' 
    
24
2017-03-17 12: 25: 31Z
  1. Gibt es eine Einschränkung, um dies zu verwenden? support.microsoft.com/en-us/help/2769380/…
    2018-02-15 07: 03: 20Z
  2. um eine Gegenerzählung bereitzustellen - wir haben uns für die Google-Version entschieden, da das Laden des Microsoft-Renderers in Chrome und FF viel länger dauert.
    2018-07-24 15: 18: 15Z

Es scheint einige js-Bibliotheken zu geben, die clientseitig die Konvertierung von .docx (nicht .doc) in html unterstützen (in keiner bestimmten Reihenfolge):

Hinweis: Wenn Sie nach der besten Möglichkeit suchen, eine doc /docx-Datei auf der Clientseite zu konvertieren, lautet die Antwort wahrscheinlich nicht . Wenn Sie es wirklich tun müssen, dann tun Sie es serverseitig, dh mit libreoffice in headless mode , apache-poi (java) , pandoc oder eine andere Bibliothek, die für Sie am besten geeignet ist.

    
7
2018-10-17 20: 04: 24Z
  1. Ich werde feststellen, dass meine Bibliothek vollständig nicht gepflegt 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.
    2017-11-09 16: 41: 45Z

ViewerJS ist hilfreichl 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

    
2
2017-09-21 17: 38: 39Z
  1. Soll ich die Link-URL von aws s3 verwenden können?
    15.02.2018 06: 52: 01Z
  2. Nein, Sie stellen nur einen lokalen Link bereit
    15.02.2018 06: 59: 44Z
  3. Vielen Dank für Ihre Antwort
    2018-02-15 07: 01: 26Z
  4. Leider sind Microsoft-Formate in meinem Kontext weiter verbreitet.
    16.01.2019, 15: 21: 57Z

Native Documents (für die ich mich interessiere) 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. So legen Sie los https://github.com/NativeDocuments/nd -WordFileEditor /blob /master /README.md

    
1
2019-07-02 00: 26: 23Z
  1. Es liegen keine Informationen zur Preisgestaltung vor. Ist der 'Word File Editor /Viewer' kostenlos?
    2019-02-18 07: 00: 55Z
  2. Es handelt sich um kommerzielle Software, aber wir haben einen kostenlosen Plan für Startups /kleine Unternehmen und für andere einen kostenlosen Plan, der Nutzungsbeschränkungen unterliegt. Details werden in Kürze veröffentlicht.
    2019-02-19 07: 30: 44Z
  3. Kann dies auf einer einzelnen Seite ohne Server ausgeführt werden, z. B. auf AWS S3?
    2019-04-06 00: 57: 12Z
  4. serverseitig packen wir es als Docker-Container, die Sie irgendwo ausführen müssten (z. B. ECS). (Im Prinzip könnten wir einen Teil davon auf Lambda ausführen, aber Sie möchten immer noch einen dauerhaften Dokumentenspeicher, vielleicht S3)
    2019-04-06 21: 44: 48Z
  5. @ JasonPlutext Das sieht interessant aus. Aber ich werde stumpf sein: Ich bin bereit, eine kleine angemessene Gebühr für ein gutes Paket oder einen guten Service zu zahlen - aber "Senden Sie Ihre Informationen und wir teilen Ihnen mit, was sie kosten" ist ein NO GO .
    2019-07-01 19: 36: 50Z

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

Dokument (name.docx) in Word als Einzeldatei-Webseite (name.mht) speichern Verwenden Sie in Ihrem HTML-Code

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

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

    
0
2015-11-13 10: 21: 29Z
  1. @ guidomocha Kommentieren Sie das nicht nur, sondern begründen Sie, warum dies ein schlechter Ansatz ist.
    2017-04-07 11: 34: 24Z

Wenn Sie Ihre DOCX-Dateien vorverarbeiten möchten, anstatt auf die Laufzeit zu warten, können Sie sie zuerst mithilfe einer Datei c in HTML konvertierenOnversion-API wie Zamzar . Sie können die API verwenden, um programmgesteuert von DOCX nach HMTL zu konvertieren, die Ausgabe auf Ihrem Server zu speichern und den 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"

Dadurch werden alle Laufzeitabhängigkeiten von Google & Die Dienste von Microsoft (z. B. wenn sie nicht verfügbar waren oder Sie eine eingeschränkte Rate hatten).

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

    
0
2017-11-10 11: 19: 40Z
Quelle platziert Hier