Руководство по созданию настраиваемых полей формы с помощью Foxit PDF SDK для Интернета

Формат PDF стал незаменимым в современном программном обеспечении, выступая универсальным решением для различных типов документов. Для компаний, которым нужны безопасные, редактируемые и удобные для пользователя PDF-файлы, становится ценным выбором. могут похвастаться богатым набором функций, предназначенных для различных отраслей. Foxit Библиотеки Foxit PDF SDK В частности, PDF-файлы на основе веб-браузера находят множество применений в управлении документами. Они играют ключевую роль во многих банковских системах, облегчая такие задачи, как составление ежемесячных отчетов. Кроме того, индустрия обеспечения соответствия полагается на веб-файлы PDF для безопасного сбора и хранения данных. В этом руководстве рассказывается, как использовать Foxit PDF SDK для Интернета для создания настраиваемых полей форм в PDF-документах вашего веб-браузера. Сопутствующий позволяет вам следовать инструкциям и реализовывать шаги, описанные в руководстве. репозиторий GitHub Что такое Foxit PDF SDK для Интернета? среди разнообразных PDF SDK, предлагаемых Foxit, выделяется как комплексная библиотека PDF, использующая преимущества механизма рендеринга Foxit. Этот SDK позволяет вам легко интегрировать комплексную и полностью настраиваемую программу просмотра PDF-файлов в ваши приложения. Foxit PDF SDK для Интернета Веб-файлы PDF, созданные с помощью Foxit SDK, позволяют пользователям легко просматривать, заполнять, комментировать и подписывать документы на разных языках непосредственно в браузерах мобильных или настольных компьютеров с помощью JavaScript. SDK совместим со всеми основными браузерами, включая Firefox, Safari, Chrome и Opera. Чтобы проиллюстрировать эту функциональность, вы приступите к созданию нового PDF-проекта на основе шаблона, используя Foxit PDF SDK для Интернета, чтобы обеспечить необходимую структуру. Этот практический подход предложит практическую демонстрацию того, как SDK расширяет возможности PDF в ваших веб-проектах. Реализация Foxit PDF SDK для Интернета Foxit PDF SDK для Интернета. ZIP-файл должен содержать SDK, документацию и примеры. Загрузите Вы можете просмотреть эти примеры, запустив HTTP-сервер из разархивированного каталога. # NPX available with NPM v5.2 or newer npx http-server Настройка проекта В этом руководстве используется в качестве инструментов внешнего интерфейса. Он основан на модулях ES (ESM), работает быстро и поставляется со всем необходимым для использования SDK «из коробки». Чтобы создать новый проект из шаблона и запустить сервер разработки, убедитесь, что у вас Node.js версии 12.2.0 или новее, и выполните следующие команды: Vite npm create vite@latest project -- --template vanilla cd project npm install npm run dev Переместите SDK в созданный каталог. В оставшейся части этого руководства предполагается, что SDK доступен по адресу относительно родительского каталога . ./FoxitPDFSDKForWeb проекта Загрузка PDF-файла Чтобы начать экспериментировать, вам понадобится программа просмотра PDF-файлов с загруженным документом. Чтобы инициализировать средство просмотра PDF, сначала создайте структуру HTML и загрузите SDK. Кроме того, в добавьте немного CSS для стилизации элементов: style.css /* style.css */ html { height: 100%; }b ody { height: 100%; margin: 0; }. container { width: 100%; height: 100%; display: flex; }# viewer { height: 100%; flex: 1; overflow: auto; }# menu { width: 10rem; }. menu-element { background: #f1f5f9; padding: 1rem; display: flex; justify-content: center; align-items: center;font-family: monospace; margin: 0.5rem; } Внутри используйте SDK для создания экземпляра : main.js pdfViewer import "./style.css"; const licenseSN = "..."; const licenseKey = "..."; const viewerContainer = document.getElementById("viewer"); const pdfViewer = new PDFViewCtrl.PDFViewer({ libPath: "./FoxitPDFSDKForWeb/lib", jr: { licenseSN, licenseKey, }, customs: { ScrollWrap: PDFViewCtrl.CustomScrollWrap.create(viewerContainer), }, }); Значения и можно найти в файле . LicenseSN LicenseKey ./FoxitPDFSDKForWeb/examples/license-key.js pdfViewer создается путем предоставления конструктору объекта конфигурации, содержащего: относительный путь к папке распакованного пакета SDK. libPath: lib параметры конфигурации для движка JR, которые включают, что наиболее важно, информацию о лицензировании. jr: пользовательский компонент, который управляет размером и прокруткой PDF-файла, при его настройке средство просмотра адаптируется к контейнеру. custom.ScrollWrap: После создания все, что вам нужно сделать, это инициализировать его и загрузить документ: pdfViewer // ... const loadPDF = async (url) => { const response = await fetch(url); const blob = await response.blob();return pdfViewer.openPDFByFile(blob); }; pdfViewer.init(viewerContainer); loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf"); Приведенный выше фрагмент извлекает PDF-файл в виде и открывает его в средстве просмотра с помощью метода . Используемый PDF-документ представляет собой демонстрационное руководство из документации, включенной в SDK. большого двоичного объекта openPDFByFile() Дополнительное пространство справа будет служить меню для перетаскиваемых полей формы. Создание пользовательских полей формы Все, что вам нужно для создания поля формы с помощью Foxit SDK, — это средство просмотра, метаданные поля формы (например, тип поля или параметры выбора) и положение поля формы. В этом примере вы создадите набор предопределенных полей формы с готовыми метаданными, которые пользователь сможет перетащить в средство просмотра. Определение метаданных Начните с определения метаданных для разрешенных полей, а также дополнительных помощников: // ... const menuContainer = document.getElementById("menu"); const randomId = () => `_${Math.random().toString(36).substring(2, 9)}`; const FieldTypes = PDFViewCtrl.PDF.form.constant.Field_Type; const formFields = [ { label: "Push Button", name: "push-button", type: FieldTypes.PushButton, width: 50, height: 30, }, { label: "Checkbox", name: "checkbox", type: FieldTypes.CheckBox, width: 50,height: 30, }, { label: "Radio Button", name: "radio-button", type: FieldTypes.RadioButton, width: 80, height: 30, }, { label: "Combo Box", name: "combo-box", type: FieldTypes.ComboBox, width: 60, height: 30, }, { label: "List Box", name: "list-box", type: FieldTypes.ListBox, width: 60, height: 100, }, { label: "Text", name: "text", type: FieldTypes.Text, width: 60, height: 30, }, ]; const comboBoxOptions = [ { label: "10", value: "10", selected: true, defaultSelected: true }, { label: "20", value: "20", selected: false, defaultSelected: false }, { label: "30", value: "30", selected: false, defaultSelected: false }, { label: "40", value: "40", selected: false, defaultSelected: false }, ]; const listBoxOptions = comboBoxOptions; Функция сгенерирует идентификаторы для идентификации полей формы в документе. — это ярлык для быстрого доступа к предопределенным типам полей, доступным в SDK. Каждая запись поля формы содержит: randomId() FieldTypes , информирующая пользователя о ее использовании. Этикетка для сопоставления перетаскиваемых элементов с записями метаданных. Имя , указывающий тип поля. Тип и для расчета прямоугольника положения в PDF-файле. Ширина height Наконец, comboBoxOptions и listBoxOptions содержат примеры параметров для полей, которые требуют, чтобы пользователи выбрали один из них. Создание элементов перетаскивания Когда метаданные готовы, вы можете создать функцию для обработки логики перетаскивания, а также размещения полей формы: // ... const loadFormFieldsMenu = async (PDFDoc) => { const PDFForm = await PDFDoc.loadPDFForm(); formFields.forEach((formField) => { const element = document.createElement("div"); element.draggable = true; element.id = formField.name; element.classList.add("menu-element"); element.textContent = formField.label; element.addEventListener("dragstart", (event) => { event.dataTransfer.setData("text/plain", event.target.id); }); menuContainer.append(element); }); }; Функция принимает — объект SDK, представляющий документ PDF — в качестве аргумента. Он используется для получения объекта , который будет использоваться для добавления и настройки полей формы после того, как эти поля будут преобразованы в перетаскиваемые элементы и добавлены в боковое меню. PDFDoc PDFForm Каждый элемент имеет атрибут , для которого установлено , чтобы разрешить перетаскивание, а также , соответствующий уникальному имени каждого поля формы, чтобы сопоставить их с базовыми метаданными. Этот позже используется внутри прослушивателя событий для передачи его во время действия перетаскивания. перетаскивания значение true идентификатор идентификатор перетаскивания Чтобы получить параметр , необходимый для функции , вам необходимо получить результирующее функции , изменив его, как показано ниже: PDFDoc loadFormFieldsMenu() обещание loadPDF() // ... loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf").then( (PDFDoc) => { loadFormFieldsMenu(PDFDoc); } ); После создания пунктов меню приложение теперь выглядит так: Реализация функции перетаскивания Создав перетаскиваемые элементы, пришло время полностью реализовать функцию перетаскивания и разрешить создание полей формы в средстве просмотра: // ... const loadFormFieldsMenu = async (PDFDoc) => { // ... viewerContainer.addEventListener("dragover", (event) => { event.preventDefault(); }); viewerContainer.addEventListener("drop", async (event) => { event.preventDefault(); const droppedFormFieldName = event.dataTransfer.getData("text/plain"); const formField = formFields.find( ({ name }) => name === droppedFormFieldName ); const pos = await pdfViewer.convertClientCoordToPDFCoord({ clientX: event.clientX, clientY: event.clientY, }); const id = randomId();await PDFForm.addControl(pos.index, id, formField.type, { left: pos.left - formField.width / 2, right: pos.left + formField.width / 2, top: pos.top + formField.height / 2, bottom: pos.top - formField.height / 2, }); const field = PDFForm.getField(id); if (formField.type === FieldTypes.ComboBox) { field.setOptions(comboBoxOptions); } else if (formField.type === FieldTypes.ListBox) { field.setOptions(listBoxOptions); } }); }; // ... В приведенном выше коде прослушиватель событий перенаправляет взаимодействие, которое будет обработано в событии , вызывая . перетаскивания перетаскивания PreventDefault() Внутри обработчика события соответствующие метаданные сначала извлекаются с использованием данных перетаскиваемого элемента. Затем положение мыши из события преобразуется в координаты PDF с помощью метода , доступного в экземпляре . drop ConvertClientCoordToPDFCoord() pdfViewer Позиция, метаданные и случайно сгенерированный идентификатор используются при вызове метода из объекта , созданного ранее в функции. Метод принимает следующие аргументы: addControl() PDFForm Индекс страницы, на которой нужно разместить поле формы (полученный из вызова ) ConvertClientCoordToPDFCoord() Случайно сгенерированный идентификатор для вновь созданного поля формы. Тип поля формы согласно предоставленным константам (полученным из метаданных) Аргумент, определяющий размещение поля формы в форме прямоугольника, рассчитанный с использованием и , чтобы мышь координировала центр поля формы. ширины высоты Наконец, если поле принимает список параметров, к нему сначала обращается метод объекта с использованием идентификатора. Параметры устанавливаются соответствующим образом с помощью метода . getField() PDFForm setOptions() Окончательное приложение с несколькими уже размещенными полями формы выглядит следующим образом: Заключение Добавление функциональности в ваши PDF-файлы действительно может принести значительную пользу вашей организации и пользователям. Электронные обновления и подписи экономят время, деньги и усилия, а персонализированные и защищенные документы повышают доверие к вашей компании. Как было продемонстрировано ранее, многоязычный инструмент PDF в сочетании с Foxit PDF SDK для Интернета обеспечивает надежное решение. Вы можете создавать собственные поля формы, реализовывать функцию перетаскивания и разблокировать ряд возможностей. Однако это лишь верхушка айсберга. Foxit PDF SDK для Интернета предлагает полный набор функций для дальнейшего улучшения функциональности PDF. Foxit Чтобы глубже изучить возможности, обратитесь к и дополнительным ресурсам, предоставляемым SDK. Документация расскажет вам о расширенных функциях, возможностях настройки и лучших практиках. официальной документации Если вы хотите просмотреть руководство или проверить свою работу, вы можете обратиться к , связанному с руководством. Репозиторий, скорее всего, содержит исходный код, примеры и дополнительные материалы, которые помогут вам понять и реализовать концепции, рассмотренные в руководстве. репозиторию GitHub Также опубликовано . здесь