4,075 讀數

使用 Foxit PDF SDK for Web 创建自定义表单字段的指南

经过 Foxit Software8m2023/11/17

太長; 讀書

本教程将教您如何使用 Foxit PDF Library for Web 在网络浏览器 PDF 文档中创建自定义表单字段。

featured image - 使用 Foxit PDF SDK for Web 创建自定义表单字段的指南

PDF 格式已成为现代软件中不可或缺的一部分，成为多种文档类型的多功能解决方案。对于寻求安全、可编辑和用户友好的 PDF 的企业来说，福昕是一个有价值的选择。福昕 PDF SDK 库拥有丰富的功能，可满足各个行业的需求。

尤其是基于网络浏览器的 PDF，在文档管理中有着无数的应用。它们在众多银行系统中发挥着关键作用，促进生成月度报表等任务。此外，合规行业依赖基于 Web 的 PDF 来安全地收集和存储数据。

本教程将指导您利用 Foxit PDF SDK for Web 在网络浏览器 PDF 文档中制作自定义表单字段。随附的GitHub 存储库允许您遵循并实施本教程中概述的步骤。

什么是 Foxit PDF SDK for Web？

Foxit PDF SDK for Web在福昕提供的各种 PDF SDK 中脱颖而出，是一个全面的 PDF 库，充分利用了福昕渲染引擎的优势。该 SDK 使您能够将全面且完全可定制的 PDF 查看器无缝集成到您的应用程序中。

使用福昕 SDK 制作的 Web PDF 使用户能够使用 JavaScript 直接从移动或桌面浏览器轻松查看、填写、注释和签署各种语言的文档。该 SDK 与所有主流浏览器兼容，包括 Firefox、Safari、Chrome 和 Opera。

为了说明该功能，您将开始从模板创建一个新的 PDF 项目，并使用 Foxit PDF SDK for Web 来提供必要的结构。这种实践方法将提供 SDK 如何在基于 Web 的项目中增强 PDF 功能的实际演示。

实施 Foxit PDF SDK for Web

下载Foxit PDF SDK for Web。 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), }, });

您可以在./FoxitPDFSDKForWeb/examples/license-key.js文件中找到licenseSN和licenseKey的值。

pdfViewer 是通过向构造函数提供包含以下内容的配置对象来创建的：

libPath：解压后的SDK包lib文件夹的相对路径
jr： JR 引擎的配置选项，其中最重要的是许可信息
Customs.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");

上面的代码片段以blob形式获取 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()函数将生成 ID 来识别文档中的表单字段。 FieldTypes是快速引用 SDK 中可用的预定义字段类型的快捷方式。每个表单字段条目包含：

告知用户其使用情况的标签
用于将拖动的元素与元数据条目相匹配的名称
指示字段类型的类型
用于计算 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); }); };

该函数接受PDFDoc （表示 PDF 文档的 SDK 对象）作为参数。它用于检索PDFForm对象，在这些字段被处理为可拖动元素并添加到侧面菜单后，该对象将用于添加和配置表单字段。

每个元素都有一个设置为true的draggable属性以允许拖动，以及一个与每个表单字段的唯一名称相对应的id ，以将它们与底层元数据相匹配。此id稍后在拖放事件侦听器中使用，以便在拖放操作期间传输它。

要获取loadFormFieldsMenu()函数所需的PDFDoc参数，您必须通过如下修改来获取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); } }); }; // ...

在上面的代码中， dragover事件监听器通过调用PreventDefault()来转发要在drop事件中处理的交互。

在放置事件处理程序内，首先使用拖动元素的数据检索匹配的元数据。然后，使用pdfViewer实例上可用的ConvertClientCoordToPDFCoord()方法将事件中的鼠标位置转换为 PDF 坐标。

位置、元数据和随机生成的 ID 在函数中之前创建的PDFForm对象的addControl()方法调用中使用。该方法接受以下参数：