Jak renderować dokument programu Word (.doc, .docx) w przeglądarce przy użyciu JavaScript?

Z powodzeniem wykonałem kod, aby wyświetlić plik PDF w przeglądarce zamiast w oknie dialogowym „Otwórz / Zapisz”. Teraz utknąłem podczas próby wyświetlenia dokumentu Worda w przeglądarce. Chcę wyświetlić dokument Worda w przeglądarce Firefox, IE7 +, Chrome itp.

Czy ktoś może pomóc? Podczas wyświetlania dokumentu programu Word w przeglądarce zawsze pojawia się okno dialogowe „Otwórz / Zapisz”. Chcę zaimplementować tę funkcjonalność za pomocą JavaScript.

Żadna przeglądarka nie ma obecnie kodu niezbędnego do renderowania dokumentów programu Word i, o ile wiem, nie ma obecnie żadnych bibliotek po stronie klienta do ich renderowania.

Jeśli jednak potrzebujesz tylko wyświetlić dokument Word, ale nie musisz go edytować, możesz użyć przeglądarki Dokumentów Google za pośrednictwem ikony, <iframe>aby wyświetlić zdalnie hostowany .doc/ .docx.

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

Rozwiązanie zaczerpnięte z „ Jak wyświetlić dokument tekstowy za pomocą fancybox ”.

Przykład:

JSFiddle

Jeśli jednak wolisz mieć natywne wsparcie, w większości przeglądarek, jeśli nie we wszystkich, polecam ponowne zapisanie .doc/ .docxjako pliku PDF. Można je również niezależnie renderować za pomocą PDF.js przez Mozillę.

Edytować:

Ogromne podziękowania dla fatbotdesigns za umieszczenie przeglądarki Microsoft Office 365 w komentarzach.

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

Jeszcze jednym ważnym zastrzeżeniem, o którym należy pamiętać, jak wskazał lightswitch05 , jest to, że spowoduje to przesłanie dokumentu na serwer innej firmy. Jeśli jest to niedopuszczalne, to ta metoda wyświetlania nie jest właściwym sposobem postępowania.

Przykłady na żywo:

Przeglądarka Dokumentów Google

Przeglądarka Microsoft Office

Odpowiedzi udzielone przez Brandona i fatbotdesigns są poprawne, ale po zaimplementowaniu podglądu dokumentów Google znaleźliśmy wiele plików .docx, których Google nie mógł obsłużyć. Przełączono na podgląd MS Office Online i działa jak urok.

Moim zaleceniem byłoby użycie adresu URL podglądu MS Office zamiast Google.

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

Wygląda na to, że istnieją biblioteki js, które mogą obsługiwać .docx (nie .doc) do konwersji html po stronie klienta (w dowolnej kolejności):

• https://github.com/lalalic/docx2html - docx do html, większość elementów jest obsługiwana

• https://github.com/mwilliamson/mammoth.js - obsługuje nagłówki, listy, tabele, przypisy końcowe, przypisy, obrazy i pola tekstowe

• https://www.npmjs.com/package/docx2html - Konwertuje dokumenty DOCX na HTML w przeglądarce lub nodejs

• https://github.com/artburkart/docx2html - podobno działa w przeglądarce

^{Uwaga: Jeśli szukasz najlepszego sposobu na konwersję pliku doc ​​/ docx po stronie klienta, prawdopodobnie odpowiedź brzmi : nie rób tego . Jeśli naprawdę musisz to zrobić, zrób to po stronie serwera, tj. Z libreoffice w trybie headless , apache-poi (java) , pandoc lub jakąkolwiek inną biblioteką, która działa najlepiej dla ciebie.}

Chyba mam pomysł. To też mnie nakręciło i nadal mam problem z wyświetleniem go w Chrome.

Zapisz dokument (nazwa.docx) w słowie jako pojedynczy plik strona internetowa (nazwa.mht) W swoim html użyj

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

Zmień wysokości i szerokości według własnego uznania.

ViewerJS jest pomocny przy przeglądaniu / osadzaniu formatów openoffice, takich jak odt, odp, ods, a także pdf.

Do osadzania dokumentów openoffice / pdf

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

/ViewerJS/ to ścieżka do ViewerJS

#../demo/ohm2013 to ścieżka do pliku, który chcesz osadzić

Native Documents (którymi jestem zainteresowany) tworzy przeglądarkę (i redaktor) specjalnie dla dokumentów Word (zarówno starsze binarne .doc, jak i nowoczesne formaty docx). Czyni to bez stratnej konwersji do formatu HTML. Oto jak zacząć https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

Jeśli chcesz wstępnie przetworzyć pliki DOCX, zamiast czekać do czasu uruchomienia, możesz najpierw przekonwertować je na HTML za pomocą interfejsu API do konwersji plików, takiego jak Zamzar . Możesz użyć API do programowej konwersji z DOCX na HMTL, zapisać dane wyjściowe na serwerze, a następnie udostępnić ten kod HTML użytkownikom końcowym.

Konwersja jest dość łatwa:

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

Spowoduje to usunięcie wszelkich zależności środowiska wykonawczego w usługach Google i Microsoft (na przykład jeśli były wyłączone lub były przez nie ograniczone).

Ma również tę zaletę, że można rozszerzyć ją na inne typy plików jeśli chcesz (PPTX, XLS, DOC itp.)