Як я можу відобразити документ Word (.doc, .docx) у браузері за допомогою JavaScript?

Я успішно зробив код для відображення PDF-файлу у браузері замість діалогового вікна "Відкрити / Зберегти". Тепер я застряг, намагаючись відобразити документ Word у браузері. Я хочу відобразити документ Word у Firefox, IE7 +, Chrome тощо.

Чи може хтось допомогти? Я завжди отримую діалогове вікно "Відкрити / зберегти" під час відображення документа Word у браузері. Я хочу реалізувати цю функціональність за допомогою JavaScript.

Наразі жоден браузер не має коду, необхідного для візуалізації Документів Word, і, наскільки я знаю, для їх надання також не існує бібліотек на стороні клієнта.

Однак якщо вам потрібно лише відобразити документ Word, але редагувати його не потрібно, ви можете скористатися засобом перегляду документів Google через "a" <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 Viewer

Відповіді Брендона та 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 або будь-якою іншою бібліотекою, яка працює найкраще для вас.}

Я думаю, що я маю ідею. Це теж робило мої гайки, і я все ще відчуваю проблеми з відображенням його в Chrome.

Збережіть документ (name.docx) словом у вигляді однофайлової веб-сторінки (name.mht) у використанні html

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

Змініть висоту та ширину, як вважаєте за потрібне.

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 це шлях вашого файлу, який хочете вставити

Рідні документи (в яких я маю інтерес) примушує глядача (і редактора) спеціально для документів Word (як застарілих двійкових .doc, так і сучасних форматів docx). Це робиться без втрати перетворення в HTML. Ось як розпочати роботу https://github.com/NativeDocuments/nd-WordFileEditor/blob/master/README.md

Якщо ви хотіли попередньо обробити файли 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 тощо)