4,088 чтения

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

к Foxit Software8m2023/11/17

Слишком долго; Читать

Из этого руководства вы узнаете, как создавать настраиваемые поля форм в PDF-документах веб-браузера с помощью библиотеки PDF Foxit для Интернета.

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

Формат PDF стал незаменимым в современном программном обеспечении, выступая универсальным решением для различных типов документов. Для компаний, которым нужны безопасные, редактируемые и удобные для пользователя PDF-файлы, Foxit становится ценным выбором. Библиотеки Foxit PDF SDK могут похвастаться богатым набором функций, предназначенных для различных отраслей.

В частности, PDF-файлы на основе веб-браузера находят множество применений в управлении документами. Они играют ключевую роль во многих банковских системах, облегчая такие задачи, как составление ежемесячных отчетов. Кроме того, индустрия обеспечения соответствия полагается на веб-файлы PDF для безопасного сбора и хранения данных.

В этом руководстве рассказывается, как использовать Foxit PDF SDK для Интернета для создания настраиваемых полей форм в PDF-документах вашего веб-браузера. Сопутствующий репозиторий GitHub позволяет вам следовать инструкциям и реализовывать шаги, описанные в руководстве.

Что такое Foxit PDF SDK для Интернета?

Foxit PDF SDK для Интернета среди разнообразных PDF SDK, предлагаемых Foxit, выделяется как комплексная библиотека PDF, использующая преимущества механизма рендеринга Foxit. Этот SDK позволяет вам легко интегрировать комплексную и полностью настраиваемую программу просмотра PDF-файлов в ваши приложения.

Веб-файлы 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

Настройка проекта

В этом руководстве Vite используется в качестве инструментов внешнего интерфейса. Он основан на модулях ES (ESM), работает быстро и поставляется со всем необходимым для использования SDK «из коробки». Чтобы создать новый проект из шаблона и запустить сервер разработки, убедитесь, что у вас Node.js версии 12.2.0 или новее, и выполните следующие команды:

 npm create vite@latest project -- --template vanilla cd project npm install npm run dev

Переместите SDK в созданный каталог. В оставшейся части этого руководства предполагается, что SDK доступен по адресу ./FoxitPDFSDKForWeb относительно родительского каталога проекта .

Загрузка PDF-файла

Чтобы начать экспериментировать, вам понадобится программа просмотра PDF-файлов с загруженным документом. Чтобы инициализировать средство просмотра PDF, сначала создайте структуру HTML и загрузите SDK.

 <!-- index.html --> <!-- ... --> <body> <div class="container"> <div id="viewer"></div> <div id="menu"></div> </div> <script src="./FoxitPDFSDKForWeb/lib/PDFViewCtrl.full.js"></script> <script type="module" src="/main.js"></script> </body> <!-- ... -->

Кроме того, в style.css добавьте немного 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; }

Внутри main.js используйте SDK для создания экземпляра 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 создается путем предоставления конструктору объекта конфигурации, содержащего:

libPath: относительный путь к папке lib распакованного пакета SDK.
jr: параметры конфигурации для движка JR, которые включают, что наиболее важно, информацию о лицензировании.
custom.ScrollWrap: пользовательский компонент, который управляет размером и прокруткой PDF-файла, при его настройке средство просмотра адаптируется к контейнеру.

После создания 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-файл в виде большого двоичного объекта и открывает его в средстве просмотра с помощью метода openPDFByFile() . Используемый PDF-документ представляет собой демонстрационное руководство из документации, включенной в SDK.

Дополнительное пространство справа будет служить меню для перетаскиваемых полей формы.

Создание пользовательских полей формы

Все, что вам нужно для создания поля формы с помощью 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;

Функция randomId() сгенерирует идентификаторы для идентификации полей формы в документе. FieldTypes — это ярлык для быстрого доступа к предопределенным типам полей, доступным в SDK. Каждая запись поля формы содержит:

Этикетка , информирующая пользователя о ее использовании.
Имя для сопоставления перетаскиваемых элементов с записями метаданных.
Тип , указывающий тип поля.
Ширина и height для расчета прямоугольника положения в PDF-файле.

Наконец, 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); }); };

Функция принимает PDFDoc — объект SDK, представляющий документ PDF — в качестве аргумента. Он используется для получения объекта 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() .

Внутри обработчика события drop соответствующие метаданные сначала извлекаются с использованием данных перетаскиваемого элемента. Затем положение мыши из события преобразуется в координаты PDF с помощью метода ConvertClientCoordToPDFCoord() , доступного в экземпляре pdfViewer .

Позиция, метаданные и случайно сгенерированный идентификатор используются при вызове метода addControl() из объекта PDFForm , созданного ранее в функции. Метод принимает следующие аргументы:

Индекс страницы, на которой нужно разместить поле формы (полученный из вызова ConvertClientCoordToPDFCoord() )
Случайно сгенерированный идентификатор для вновь созданного поля формы.
Тип поля формы согласно предоставленным константам (полученным из метаданных)
Аргумент, определяющий размещение поля формы в форме прямоугольника, рассчитанный с использованием ширины и высоты , чтобы мышь координировала центр поля формы.

Наконец, если поле принимает список параметров, к нему сначала обращается метод getField() объекта PDFForm с использованием идентификатора. Параметры устанавливаются соответствующим образом с помощью метода setOptions() .

Окончательное приложение с несколькими уже размещенными полями формы выглядит следующим образом:

Заключение

Добавление функциональности в ваши PDF-файлы действительно может принести значительную пользу вашей организации и пользователям. Электронные обновления и подписи экономят время, деньги и усилия, а персонализированные и защищенные документы повышают доверие к вашей компании.

Как было продемонстрировано ранее, многоязычный инструмент PDF Foxit в сочетании с Foxit PDF SDK для Интернета обеспечивает надежное решение. Вы можете создавать собственные поля формы, реализовывать функцию перетаскивания и разблокировать ряд возможностей. Однако это лишь верхушка айсберга. Foxit PDF SDK для Интернета предлагает полный набор функций для дальнейшего улучшения функциональности PDF.

Чтобы глубже изучить возможности, обратитесь к официальной документации и дополнительным ресурсам, предоставляемым SDK. Документация расскажет вам о расширенных функциях, возможностях настройки и лучших практиках.

Если вы хотите просмотреть руководство или проверить свою работу, вы можете обратиться к репозиторию GitHub , связанному с руководством. Репозиторий, скорее всего, содержит исходный код, примеры и дополнительные материалы, которые помогут вам понять и реализовать концепции, рассмотренные в руководстве.