Я успешно выполнил код для отображения 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 ».
Пример:
Однако, если вы предпочитаете иметь встроенную поддержку, в большинстве, если не во всех браузерах, я бы рекомендовал повторно сохранить .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 , заключается в том, что это загрузит ваш документ на сторонний сервер. Если это неприемлемо, значит, такой способ отображения - неправильный образ действий.
Живые примеры:
urlпараметр на полный URL-адрес файла .doc, размещенного на вашем сервере или в любом другом месте, с которым он может быть напрямую связан. Документы Google обрабатывают преобразование в формат, который может обрабатываться браузером на лету, и не требует его загрузки или сохранения в Документах Google, вместо этого выполняется запрос на стороне сервера для захвата файла.
localhost. Ему нужен общедоступный URL. Вы можете использовать базовую службу пересылки, такую как Finch .
Ответы 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