Простое создание заполняемой формы с помощью текстового процессора JavaScript
В этом блоге показано, как создать и заполнить форму в документе Word с помощью компонента Syncfusion JavaScript Word Processor (редактор документов). Это компонент пользовательского интерфейса, который позволяет создавать, редактировать, просматривать и печатать документы Word в интерактивном режиме в веб-приложении. Он предоставляет все стандартные функции обработки текста, включая редактирование текста, форматирование содержимого, изменение размера изображений и таблиц, поиск и замену текста, создание оглавления, печать и многое другое. Для выполнения некоторых операций требуются зависимости на стороне сервера.
Примечание. Если вы не знакомы с нашим компонентом текстового процессора, настоятельно рекомендуется следовать нашему Руководству по началу работы.
Поля формы в текстовом процессоре JavaScript
Компонент JavaScript Word Processor поддерживает устаревшие поля форм, такие как текст, флажки и раскрывающиеся поля форм, для создания заполняемых форм в документе Word. Эти поля формы поддерживаются в форматах DOC и DOCX.
Компонент позволяет авторам защищать свои документы с помощью нескольких ограничений редактирования. Одним из таких ограничений редактирования является FormFieldsOnly. Он позволяет пользователям заполнять только поля формы в документе Word и запрещает все остальные изменения.
Примечание. Подробнее см. в документации Защита документа в режиме заполнения формы.
Создайте заполняемую форму в текстовом процессоре JavaScript
Компонент JavaScript Word Processor поставляется с интуитивно понятным пользовательским интерфейсом для разработки заполняемой формы в документе Word путем вставки устаревших полей формы, как в приложениях Microsoft Word. Устаревшие поля формы позволяют создавать форму с помощью:
- Текстовые поля формы с текстовым типом для заполнения любого строкового значения.
- Поля текстовой формы с числовым типом для заполнения числового значения.
- Поля текстовой формы с типом даты для заполнения даты или времени.
- Поля формы флажка для ответа на простой вопрос «да» или «нет».
- Поля выпадающей формы для выбора одного значения из списка строк.
Следующий GIF иллюстрирует, как создать заполняемую форму в компоненте Word Processor.
Если вы хотите запретить заполнение определенного поля формы, снимите флажок Включить заполнение для нужного поля формы в диалоговом окне свойств. (Для этого дважды щелкните поле формы или выберите параметр свойств в контекстном меню.)
Используйте API formFieldSettings для настройки внешнего вида (включение/отключение заливки, заливки и выбора цвета) полей формы.
Вы можете автоматизировать получение и изменение свойств поля формы в документе Word с помощью API getFormFieldInfo и setFormFieldInfo. Подробнее см. в разделе Поля форм в документации по JavaScript Word Processor.
Заполните форму в текстовом процессоре JavaScript
После того как вы создадите заполняемую форму и защитите ее с типом ограничения редактирования FormFieldsOnly, ваша форма будет готова к заполнению.
Компонент Syncfusion Word Processor предоставляет два режима заполнения форм:
- PopUp: открывает всплывающее окно с редактором на месте для заполнения поля формы при нажатии или переходе к полю формы. Этот режим включен по умолчанию.
- Встроенный: это позволяет пользователям заполнять поля формы напрямую без всплывающих окон.
Следующий GIF иллюстрирует, как заполнить форму в компоненте JavaScript Word Processor.
Используйте API resetFormFields, чтобы сбросить все поля формы в документе Word до значений по умолчанию.
Экспорт данных заполненной формы в текстовый процессор JavaScript
Текстовый процессор имеет API exportFormData, который возвращает имена и значения всех полей формы в документе. Вы можете легко сохранить экспортированные данные формы в базу данных.
См. следующий пример кода.
let formFieldDate: FormFieldData[] = documentEditor.exportFormData();
Импорт данных формы в заполняемую форму в текстовом процессоре JavaScript
Компонент поставляется с API importFormData, который устанавливает указанное значение для соответствующего поля формы в документе. Вы можете автоматически заполнять значения из базы данных в поля формы при открытии документа в компоненте Word Processor.
См. следующий пример кода.
let textformField: FormFieldData = { fieldName: 'Text1', value: 'Hello World' }; let checkformField: FormFieldData = { fieldName: 'Check1', value: true }; let dropdownformField: FormFieldData = { fieldName: 'Drop1', value: 1 }; //Import form field data this.container.documentEditor.importFormData([textformField, checkformField, dropdownformField]);
Репозиторий GitHub
См. полный рабочий Пример создания заполняемой формы с использованием текстового процессора Syncfusion JavaScript.
Заключение
Спасибо за прочтение! С помощью полей формы в компоненте JavaScript Word Processor вы можете легко предоставить возможность заполнения форм в документах Word в своем веб-приложении. Компонент Word Processor доступен для веб-платформ JavaScript (ES5 и ES6), Angular, React, Vue, ASP.NET MVC, ASP.NET Core и Blazor.
Вы уже являетесь пользователем Syncfusion? Вы можете скачать настройку продукта. Если вы еще не являетесь пользователем Syncfusion, вы можете скачать 30-дневную бесплатную пробную версию.
Если у вас есть какие-либо вопросы об этих функциях, сообщите нам об этом в комментариях ниже. Вы также можете связаться с нами через наш форум поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!
Связанные блоги
- Просмотр и редактирование документов Word в приложениях Angular: руководство для начинающих
- Легкое редактирование документов: текстовый процессор Syncfusion + Wisej
- Просмотр документов Word с отслеживанием изменений и комментариев в веб-приложении
- Динамическое заполнение данных в таблице Word с помощью Java
Первоначально опубликовано на https://www.syncfusion.com 10 мая 2022 г.