Редактирование word с помощью js

Обновлено: 05.07.2024

Я пытаюсь использовать docx.js (GitHub РЕПО) для создания документа Word, но я не могу заставить его работать.

что делает функция convertContent доступен. Результатом чего является объект, например

в Notepad++ и сохранил его как файл с расширением "docx", но когда я открываю его в MS Word, но он говорит: "не может быть открыт, потому что есть проблема с содержимым".

мне не хватает каких-то атрибутов или XML-тегов или чего-то еще?

вы можете создать документ Docx из шаблона, используя docxtemplater (библиотека, которую я создал).

Он может заменить теги их значениями (например, шаблоном), а также заменить изображения в платной версии.

Я знаю, что это более старый вопрос, и у вас уже есть ответ, но я изо всех сил пытался заставить это работать в течение дня, поэтому я подумал, что поделюсь своими результатами.

создать docx было сложно, так как абсолютно нет документация по этому делу пока отсутствует. Но просматривая код, я вижу, что он ожидает, что HTML будет находиться в файловом объекте. Для моих целей я хотел использовать HTML, который я визуализировал, а не какой-то HTML-файл, который пользователь должен выбрать для загрузки. Поэтому я должен был обмануть его, сделав свой собственный объект с тем же свойством, которое он искал, и передать его. Чтобы сохранить его клиенту, я использую FileSaver.js, для чего требуется капля. Я!--14-->включена эта функция что преобразование в base64 в BLOB. Поэтому мой код для его реализации таков:

в конце концов, это будет работать для простых документов Word, но не сложные для ничего больше. Я не мог получить ни один из моих стилей для рендеринга, и я даже не пытался заставить изображения работать. С тех пор я отказался от этого подхода и теперь исследую DocxgenJS или какое-то серверное решение.

вы можете найти эту ссылку полезной,

онлайн демо здесь:

вы делаете правильную вещь codewise, но ваш файл не является допустимым файлом docx. Если вы посмотрите через docx() функция в docx.js, вы увидите, что файл docx на самом деле является zip, содержащий несколько xml-файлов.

Я использую Open Xml SDK для JavaScript.

в основном, на веб-сервере у меня есть пустой файл docx в качестве нового шаблона. когда пользователь в браузере нажмет новый файл docx, я получу пустой файл docx в качестве шаблона, преобразую его в BASE64 и верну его как ответ Ajax.

в клиентских скриптах вы конвертируете строку BASE64 в массив байтов и используете openxmlsdk.js для загрузки массива байтов как объект javascript OpenXmlPackage.

после загрузки пакета вы можете использовать обычный OpenXmlPart для создания реального документа. (вставка изображения, создание таблицы / строки).

В этой статье описаны основные принципы использования API JavaScript для Word для создания надстроек. Представлены основные понятия, важные для использования API.

Сведения об асинхронном типе API-интерфейсов Word и принципах их работы с документами см. в статье Использование модели API, зависящей от приложения.

API-интерфейсы Office.js для Word

Надстройка Word взаимодействует с объектами в Word с помощью API JavaScript для Office, включающего две объектных модели JavaScript:

API JavaScript для Word. API-интерфейс JavaScript для Word предоставляет строго типизированные объекты, с помощью которых можно получать доступ к документам, диапазонам, таблицам, спискам, форматированию и другим объектам.

Общие API-интерфейсы. Общий API можно использовать для доступа к таким компонентам, как пользовательский интерфейс, диалоговые окна и параметры клиентов, общие для нескольких типов приложений Office.

Скорее всего, вы будете разрабатывать большую часть функций надстроек для Word с помощью API JavaScript для Word, но вам также потребуются объекты из общего API. Например:

    . Объект Context представляет среду выполнения надстройки и предоставляет доступ к ключевым объектам API. Он состоит из данных о конфигурации, например contentLanguage и officeTheme , а также предоставляет сведения о среде выполнения надстройки, например host и platform . Кроме того, он предоставляет метод requirements.isSetSupported() , с помощью которого можно проверить, поддерживается ли указанный набор обязательных элементов приложением Excel, в котором запускается надстройка. . Объект Document предоставляет метод getFileAsync() , позволяющий загрузить файл Word, в котором работает надстройка.

Различия между API JS для Word и общими API.

Объектная модель для Word

Чтобы понять API-интерфейсы Word, нужно понимать, как компоненты документа связаны друг с другом.

В этой статье мы создадим приложение, которое позволит пользователям вводить свой данные в текстовом редакторе и генерировать из него документ Word. Мы будем использовать Express для внутреннего интерфейса и React для внешнего интерфейса.

Мы начнем с серверной части. Для начала мы создадим папку проекта с папкой backend внутри. Затем в папке backend запустите, npx express-generator чтобы создать приложение Express. Затем запустите npm i для установки пакетов. Далее мы устанавливаем наши собственные пакеты. Нам нужен Babel для запуска приложения с последней версией JavaScript, CORS для междоменных запросов, HTML-DOCX-JS для преобразования строк HTML в документы Word, Multer для загрузки файлов, Sequelize для ORM и SQLite3 для нашей базы данных.

Мы устанавливаем все это, выполнив:

После этого мы изменим package.json чтобы добавить команды start и babel-node :

Таким образом мы запускаем наше приложение с Babel вместо обычной среды выполнения Node.

Затем создайте файл .babelrc в папке backend и добавьте:

чтобы указать, что мы запускаем наше приложение с последней версией JavaScript.

Далее мы добавляем код нашей базы данных. Запустите npx sequelize-cli init в папке backend , чтобы создать код Sequelize.

В config.js добавьте:

Затем создайте нашу модель и выполните миграцию, запустив:

создать модель Document и таблицу Documents .

Затем мы запускаем:

Далее мы создаем наши маршруты. Создайте файл document.js в папке routes и добавьте:

Мы выполняем стандартные операции CRUD для таблицы Documents в первых 4 маршрутах. У нас есть GET для получения всех Documents , POST для создания Document , PUT для обновления Document по ID, DELETE для удаления Document путем поиска по ID. У нас есть HTML в поле document для создания документа Word позже.

Маршрут generate для создания документа Word. Мы получаем идентификатор из URL, а затем используем пакет HTML-DOCX-JS для создания документа Word. Мы генерируем документ Word путем преобразования документа HTML в объект файлового потока с помощью пакета HTML-DOCX-JS, а затем записываем поток в файл и сохраняем путь к файлу в Document с идентификатором в параметре URL.

У нас также есть маршрут uploadImage , позволяющий пользователю загружать изображения с помощью CKEditor с помощью плагина CKFinder. Плагин ожидает uploaded и url в ответе, поэтому мы возвращаем их.

Затем нам нужно добавить папку files в backend .

Далее в app.js мы заменим существующий код на:

Мы открываем папку с файлом:

и устанавливаем маршрут document с помощью:

Теперь наше API готово, мы можем перейти к работе с интерфейсом. Создайте приложение React с помощью команды «Create React App». Запускаем npx create-react-app frontend в корневой папке проекта.

Установите все пакеты, запустив:

После установки пакетов мы можем заменить существующий код в App.js на:

добавить наш верхний бар и маршрут к домашней странице.

В App.css , мы заменим существующий код на:

Далее мы создаем форму для добавления и редактирования документов. Создайте файл DocumentForm.js в src и добавьте:

Мы обертываем нашу React Bootstrap Form в компоненту Formik , чтобы получить функцию обработки формы от Formik, которую мы используем непосредственно в полях формы React Bootstrap. Мы не можем сделать то же самое с CKEditor, поэтому мы пишем свои собственные обработчики форм для редактора форматированного текста. Мы устанавливаем data в, CKEditor чтобы установить значение ввода редактора форматированного текста. Эта функция onInit используется, когда пользователи пытаются редактировать существующий документ, поскольку мы должны установить параметр data с помощью редактора, который инициализируется при запуске setContent(doc.document); . Метод onChange является функция обработчика для установки content всякий раз, когда он обновляется, так что параметр data будет иметь последнее значение, которое мы будем представлять, когда пользователь нажимает кнопку Сохранить.

Мы используем плагин CKFinder для загрузки изображений. Чтобы это работало, мы устанавливаем URL загрузки изображения на URL маршрута загрузки в нашем бэкэнде.

Схема проверки формы предоставляется объектом Yup schema , который мы создаем в верхней части кода. Мы проверяем, заполнено ли поле name .

Функция handleSubmit предназначена для обработки представления данных в заднюю часть. Мы проверяем оба объекта content и evt , чтобы проверить оба поля, поскольку мы не можем включить обработчики форм Formik непосредственно в CKEditor компонент.

Если все верно, то мы добавляем новый документ или обновляем его в зависимости от того, является ли реквизит верным или нет.

Затем, когда сохранение getAllDocuments прошло успешно, мы вызываем, чтобы заполнить последние документы в нашем хранилище MobX, запустив documentStore.setDocuments(response.data); .

Далее мы делаем нашу домашнюю страницу, создав HomePage.js в папке src и добавив:

У нас есть таблица React Bootstrap для перечисления документов с кнопками для редактирования, удаления документов и создания документа Word. Кроме того, в каждой строке есть ссылка Open для открытия документа Word. У нас есть кнопка создания в верхней части таблицы.

Когда страница загружается, мы вызываем getAllDocuments и заполняем их в хранилище MobX.

Далее создайте request.js в папке src и добавьте:

Добавив функции для отправки запросов к нашим маршрутам в серверной части.

Затем мы создаем наше хранилище MobX. Создайте store.js в папке src и добавьте:

Мы имеем функцию, setDocuments чтобы поместить данные в хранилище, который мы использовали в HomePage и DocumentForm и мы инстанцировали его перед экспортом , так что мы должны сделать это только в одном месте.

обозначает массив documents в DocumentStore в качестве объекта, который может отслеживаться компонентами на предмет изменений. setDocuments обозначается как функция , которая может быть использована для установки массива documents в хранилище.

Затем мы создаем верхнюю панель, создав файл TopBar.js в папке src и добавив:

Это содержит Reac Bootstrap Navbar чтобы показать верхнюю панель со ссылкой на главную страницу и имя приложения. Мы показываем ее только если существует token . Также мы проверяем pathname чтобы выделить правильные ссылки, установив параметр active .

Далее в index.html мы заменим существующий код на:

После написания всего этого кода мы можем запустить наше приложение. Прежде чем что-либо запускать, установите nodemon , запустив, npm i -g nodemon чтобы нам не приходилось перезагружать сервер при изменении файлов.

Затем запустите back end, запустив команду npm start в папке backend и npm start в папке frontend , затем выберите «yes», если вас попросят запустить его с другого порта.

This is a very small library that is capable of converting HTML documents to DOCX format that is used by Microsoft Word 2007 and onward. It manages to perform the conversion in the browser by using a feature called 'altchunks'. In a nutshell, it allows embedding content in a different markup language. We are using MHT document to ship the embedded content to Word as it allows to handle images. After Word opens such file, it converts the external content to Word Processing ML (this is how the markup language of DOCX files is called) and replaces the reference.

Altchunks were not supported by Microsoft Word for Mac 2008 and are not supported by LibreOffice and Google Docs.

This library should work on any modern browser that supports Blobs (either natively or via Blob.js). It was tested on Google Chrome 36, Safari 7 and Internet Explorer 10.

It also works on Node.js (tested on v0.10.12) using Buffer instead of Blob .

This library supports only inlined base64 images (sourced via DATA URI). But it is easy to convert a regular image (sourced from static folder) on the fly. If you need an example of such conversion you can checkout a demo page source (see function convertImagesToBase64 ).

Very minimal demo is available as test/sample.html in the repository and online. Please note that saving files on Safari is a little bit convoluted and the only reliable method seems to be falling back to a Flash-based approach (such as Downloadify). Our demo does not include this workaround to keep things simple, so it will not work on Safari at this point of time.

You can also find a sample for using it in Node.js environment here.

To generate DOCX, simply pass a HTML document (as string) to asBlob method to receive Blob (or Buffer ) containing the output file.

asBlob can take additional options for controlling page setup for the document: