Как визуализировать документ Word (.doc, .docx) в браузере с помощью JavaScript?

Я успешно выполнил код для отображения PDF-файла в браузере вместо диалогового окна «Открыть / Сохранить». Теперь я застрял, пытаясь отобразить документ Word в браузере. Я хочу отобразить документ Word в Firefox, IE7 +, Chrome и т. Д.

Кто-нибудь может помочь? Я всегда получаю диалоговое окно «Открыть / Сохранить» при отображении документа Word в браузере. Я хочу реализовать эту функциональность с помощью JavaScript.

В настоящее время в браузерах нет кода, необходимого для визуализации документов Word, и, насколько мне известно, в настоящее время нет клиентских библиотек для их визуализации.

Однако, если вам нужно только отобразить документ Word, но не нужно его редактировать, вы можете использовать средство просмотра документов Google через объект <iframe>для отображения удаленно размещенного файла .doc/ .docx.

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

Решение адаптировано из « Как отобразить текстовый документ с помощью fancybox ».

Пример:

JSFiddle

Однако, если вы предпочитаете иметь встроенную поддержку, в большинстве, если не во всех браузерах, я бы рекомендовал повторно сохранить .doc/ .docxв виде файла PDF. Их также можно независимо отрисовывать с помощью PDF.js от Mozilla.

Редактировать:

Огромное спасибо fatbotdesigns за публикацию программы просмотра Microsoft Office 365 в комментариях.

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

Еще одно важное предостережение, о котором следует помнить, как указано в Lightswitch05 , заключается в том, что это загрузит ваш документ на сторонний сервер. Если это неприемлемо, значит, такой способ отображения - неправильный образ действий.

Живые примеры:

Средство просмотра документов Google

Средство просмотра Microsoft Office

Ответы Brandon и fatbotdesigns верны, но, реализовав предварительный просмотр документации Google, мы обнаружили несколько файлов .docx, которые не удалось обработать Google. Перешел на предварительную версию MS Office Online и работает как шарм.

Я бы рекомендовал использовать URL-адрес предварительного просмотра MS Office вместо Google.

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

Кажется, есть некоторые js-библиотеки, которые могут обрабатывать .docx (не .doc) для преобразования HTML на стороне клиента (без определенного порядка):

• https://github.com/lalalic/docx2html - docx в html, поддерживается большинство элементов

• https://github.com/mwilliamson/mammoth.js - поддерживает заголовки, списки, таблицы, концевые сноски, сноски, изображения и текстовые поля.

• https://www.npmjs.com/package/docx2html - конвертирует документы DOCX в HTML в браузере или в nodejs.

• https://github.com/artburkart/docx2html - видимо, работает в браузере

^{Примечание. Если вы ищете лучший способ конвертировать файл doc / docx на стороне клиента, то, вероятно, ответ - не делайте этого . Если вам действительно нужно это сделать, сделайте это на стороне сервера, то есть с помощью libreoffice в режиме без заголовка , apache-poi (java) , pandoc или любой другой библиотеки, которая лучше всего подходит для вас.}

ViewerJS полезен для просмотра / встраивания формата openoffice, такого как odt, odp, ods, а также pdf.

Для встраивания документа openoffice / pdf

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

/ViewerJS/ это путь ViewerJS

#../demo/ohm2013 путь к вашему файлу, который вы хотите встроить

Думаю, у меня есть идея. Это тоже меня помешало, и мне все еще не удается отобразить его в Chrome.

Сохраните документ (name.docx) в Word как веб-страницу из одного файла (name.mht) В вашем html используйте

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

Измените высоту и ширину по своему усмотрению.

Native Documents (в котором я заинтересован) создает программу просмотра (и редактор) специально для документов Word (как устаревших двоичных форматов .doc, так и современных форматов docx). Это происходит без преобразования в HTML с потерями. Вот как начать работу https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

PDFTron WebViewer поддерживает рендеринг Word (и других форматов Office) непосредственно в любом браузере и без каких-либо зависимостей на стороне сервера. Для проверки попробуйте https://www.pdftron.com/webviewer/demo

Если вы хотите предварительно обработать файлы DOCX, а не дожидаться времени выполнения, вы можете сначала преобразовать их в HTML с помощью API преобразования файлов, такого как Zamzar . Вы можете использовать API для программного преобразования из DOCX в HMTL, сохранить вывод на свой сервер и затем передать этот HTML конечным пользователям.

Преобразование довольно просто:

curl https://api.zamzar.com/v1/jobs \
-u API_KEY: \
-X POST \
-F "source_file=@my.docx" \
-F "target_format=html5"

Это приведет к удалению любых зависимостей времени выполнения от служб Google и Microsoft (например, если они не работают или ваша скорость ограничена ими).

Он также имеет то преимущество, что вы можете распространить его на другие типы файлов, если хотите (PPTX, XLS, DOC и т. Д.).

Вы также можете использовать некоторые существующие API, такие как GroupDocs.Viewer, которые могут преобразовать ваш документ в изображение или HTML, а затем вы сможете отобразить его в своем собственном приложении.

Используйте Libre Office API Вот пример

libreoffice --headless --convert-to html docx-file-path --outdir html-dir-path