Формат PDF стал незаменимым в современном программном обеспечении, выступая универсальным решением для различных типов документов. Для компаний, которым нужны безопасные, редактируемые и удобные для пользователя PDF-файлы, Foxit становится ценным выбором. Библиотеки Foxit PDF SDK могут похвастаться богатым набором функций, предназначенных для различных отраслей.
В частности, PDF-файлы на основе веб-браузера находят множество применений в управлении документами. Они играют ключевую роль во многих банковских системах, облегчая такие задачи, как составление ежемесячных отчетов. Кроме того, индустрия обеспечения соответствия полагается на веб-файлы PDF для безопасного сбора и хранения данных.
В этом руководстве рассказывается, как использовать Foxit PDF SDK для Интернета для создания настраиваемых полей форм в PDF-документах вашего веб-браузера. Сопутствующий репозиторий GitHub позволяет вам следовать инструкциям и реализовывать шаги, описанные в руководстве.
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 для Интернета. 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, сначала создайте структуру 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 , созданного ранее в функции. Метод принимает следующие аргументы:
Наконец, если поле принимает список параметров, к нему сначала обращается метод getField() объекта PDFForm с использованием идентификатора. Параметры устанавливаются соответствующим образом с помощью метода setOptions() .
Окончательное приложение с несколькими уже размещенными полями формы выглядит следующим образом:
Добавление функциональности в ваши PDF-файлы действительно может принести значительную пользу вашей организации и пользователям. Электронные обновления и подписи экономят время, деньги и усилия, а персонализированные и защищенные документы повышают доверие к вашей компании.
Как было продемонстрировано ранее, многоязычный инструмент PDF Foxit в сочетании с Foxit PDF SDK для Интернета обеспечивает надежное решение. Вы можете создавать собственные поля формы, реализовывать функцию перетаскивания и разблокировать ряд возможностей. Однако это лишь верхушка айсберга. Foxit PDF SDK для Интернета предлагает полный набор функций для дальнейшего улучшения функциональности PDF.
Чтобы глубже изучить возможности, обратитесь к официальной документации и дополнительным ресурсам, предоставляемым SDK. Документация расскажет вам о расширенных функциях, возможностях настройки и лучших практиках.
Если вы хотите просмотреть руководство или проверить свою работу, вы можете обратиться к репозиторию GitHub , связанному с руководством. Репозиторий, скорее всего, содержит исходный код, примеры и дополнительные материалы, которые помогут вам понять и реализовать концепции, рассмотренные в руководстве.
Также опубликовано здесь .