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

146

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.

Pankaj
źródło
możesz użyć edytora dokumentów syncfusion w reagowaniu na wyświetlanie i edytowanie plików docx
Yusuf Mohammad

Odpowiedzi:

225

Ż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

Brandon Anzaldi
źródło
2
@Pankaj Nie musisz przesyłać go na Dysk Google. Możesz po prostu zmienić urlparametr na pełny adres URL do pliku .doc, hostowanego na serwerze lub w dowolnym miejscu, do którego można bezpośrednio połączyć. Dokumenty Google obsługują konwersję do formatu, który może być obsługiwany przez przeglądarkę w locie i nie wymagają przesyłania ani przechowywania w Dokumentach Google, zamiast tego wykonują żądanie pobrania pliku po stronie serwera.
Brandon Anzaldi
3
@Pankaj Nawet jeśli hostujesz serwer lokalny, Google nie ma do niego dostępu localhost. Potrzebuje publicznie dostępnego adresu URL. Możesz użyć podstawowej usługi spedycyjnej, takiej jak Finch .
Brandon Anzaldi
11
Możesz także użyć przeglądarki aplikacji biurowych na żywo: //view.officeapps.live.com/op/embed.aspx?src=your_url_here umieść ten adres URL w
ramce
1
@BonifacePereira Jeśli konfigurujesz intranet, prawdopodobnie będziesz musiał przeprowadzić lokalną konwersję, ponieważ GDocs i Live musiałyby skądś pobrać dokument. Jeśli możesz, możesz skonfigurować serwer do konwersji za pomocą OpenOffice lub czegoś podobnego: stackoverflow.com/questions/5538584/ ...
Brandon Anzaldi
18
Chcę tylko zaznaczyć, że obie te metody zdecydowanie przesyłają pliki na serwery Google i Microsoft. Jeśli masz do czynienia z poufnymi informacjami, do których powinien mieć ograniczony dostęp - nie rób tego. Skorzystaj z alternatywnego rozwiązania z PDF.js, aby wygenerować wersję PDF pliku do wyświetlenia w przeglądarce i zaoferować łącze do pobrania różnych wersji programu Excel / doc.
włącznik świateł 05
30

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' 
kernelmann
źródło
1
Czy są jakieś ograniczenia w używaniu tego? support.microsoft.com/en-us/help/2769380/…
Wisznu,
aby zapewnić narrację licznika - wybraliśmy wersję Google, ponieważ renderer microsoft trwa znacznie dłużej, aby załadować zarówno w chrome, jak i ff
David Holiday
13

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

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.

ccpizza
źródło
1
Odnotuję, że moja biblioteka jest całkowicie nieużywana. Był w stanie przekonwertować pliki docx na coś, co można renderować w przeglądarce. Nie wiem, czy to już prawda.
artburkart
2

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.

Cai Esson
źródło
6
@guidomocha Nie komentuj tego, tylko uzasadnij, dlaczego jest to złe podejście.
J. Louw,
2

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ć

NaveenDA
źródło
Czy mogę użyć adresu URL linku z aws s3
Wisznu,
Nie,
udostępniasz
1
Dziękuję za odpowiedź
Wisznu,
Niestety w moim kontekście formaty Microsoft są bardziej rozpowszechnione.
guettli
1

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

JasonPlutext
źródło
2
Nie ma żadnych informacji o cenach. Czy „Edytor / przeglądarka plików Word” jest bezpłatny?
FiringBlanks
To komercyjne oprogramowanie, ale mamy bezpłatny plan dla start-upów / małych firm, a dla innych darmowy plan z ograniczeniami użytkowania. Wkrótce opublikujemy szczegóły.
JasonPlutext
czy to może działać na pojedynczej stronie serverless, np. na aws s3?
Graham Chiu,
po stronie serwera pakujemy go jako kontenery Docker, które trzeba gdzieś uruchomić (np. ECS). (Zasadniczo moglibyśmy uruchomić część tego na Lambdzie, ale nadal potrzebujesz trwałego magazynu dokumentów, może S3)
JasonPlutext
3
@JasonPlutext To wygląda interesująco. Ale powiem szczerze: jestem gotów zapłacić niewielką rozsądną opłatę za dobrą paczkę lub usługę - ale „prześlij swoje informacje, a my poinformujemy Cię, ile to kosztuje” jest NIE DOSTĘPNE .
manassehkatz-Moving 2 Codidact
0

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

Chris Whyley
źródło