Простое создание заполняемой формы с помощью текстового процессора 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-дневную бесплатную пробную версию.

Если у вас есть какие-либо вопросы об этих функциях, сообщите нам об этом в комментариях ниже. Вы также можете связаться с нами через наш форум поддержки, портал поддержки или портал обратной связи. Мы всегда рады Вам помочь!

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 10 мая 2022 г.