PDF 格式已成为现代软件中不可或缺的一部分，成为多种文档类型的多功能解决方案。对于寻求安全、可编辑和用户友好的 PDF 的企业来说， 是一个有价值的选择。 拥有丰富的功能，可满足各个行业的需求。 福昕 福昕 PDF SDK 库 尤其是基于网络浏览器的 PDF，在文档管理中有着无数的应用。它们在众多银行系统中发挥着关键作用，促进生成月度报表等任务。此外，合规行业依赖基于 Web 的 PDF 来安全地收集和存储数据。 本教程将指导您利用 Foxit PDF SDK for Web 在网络浏览器 PDF 文档中制作自定义表单字段。随附的 允许您遵循并实施本教程中概述的步骤。 GitHub 存储库 什么是 Foxit PDF SDK for Web？   在福昕提供的各种 PDF SDK 中脱颖而出，是一个全面的 PDF 库，充分利用了福昕渲染引擎的优势。该 SDK 使您能够将全面且完全可定制的 PDF 查看器无缝集成到您的应用程序中。 Foxit PDF SDK for Web 使用福昕 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 设置项目 本教程使用 作为前端工具。它基于 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。     <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>  此外，在 中，添加一些 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), }, }); 您可以在 文件中找到 和 的值。 ./FoxitPDFSDKForWeb/examples/license-key.js licenseSN licenseKey  pdfViewer 是通过向构造函数提供包含以下内容的配置对象来创建的：   解压后的SDK包 文件夹的相对路径 libPath： lib  JR 引擎的配置选项，其中最重要的是许可信息 jr： 控制 PDF 大小和滚动的自定义组件，其中设置可将查看器调整为容器 Customs.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 随附文档中的演示指南。  blob 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;   函数将生成 ID 来识别文档中的表单字段。  是快速引用 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); }); }; 该函数接受  （表示 PDF 文档的 SDK 对象）作为参数。它用于检索 对象，在这些字段被处理为可拖动元素并添加到侧面菜单后，该对象将用于添加和配置表单字段。 PDFDoc 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 在 事件处理程序内，首先使用拖动元素的数据检索匹配的元数据。然后，使用 实例上可用的 方法将事件中的鼠标位置转换为 PDF 坐标。 放置 pdfViewer ConvertClientCoordToPDFCoord() 位置、元数据和随机生成的 ID 在函数中之前创建的 对象的 方法调用中使用。该方法接受以下参数： PDFForm addControl() 放置表单字段的页面索引（从 调用中检索） ConvertClientCoordToPDFCoord() 为新创建的表单字段随机生成的 ID 根据提供的常量的表单字段的类型（从元数据检索） 以矩形形式定义表单字段的位置的参数，使用 和 计算以使鼠标坐标表单字段的中心 宽度 高度 最后，如果该字段接受选项列表，则首先通过 对象的 方法使用 ID 来访问它。使用 方法相应地设置选项。 PDFForm getField() setOptions() 最终的应用程序已经放置了一些表单字段，如下所示：  结论 向 PDF 添加功能确实可以为您的组织和用户带来显着的好处。电子更新和签名可以节省时间、金钱和精力，而定制且安全的文档可以增强对您公司的信任。 如前所述， 多语言 PDF 工具与 Foxit PDF SDK for Web 相结合，提供了强大的解决方案。您可以创建自定义表单字段、实现拖放功能并解锁一系列功能。然而，这只是冰山一角。 Foxit PDF SDK for Web 提供了一套全面的功能，可进一步增强您的 PDF 功能。 福昕 要更深入地研究可能性，请参阅 SDK 提供的 和其他资源。该文档将指导您了解高级功能、自定义选项和最佳实践。 官方文档 如果您想查看本教程或检查您的工作，可以参考与本教程关联的 。该存储库可能包含源代码、示例和其他材料，以帮助您理解和实现本教程中涵盖的概念。 GitHub 存储库 也发布 。 在这里

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

成功云迁移的完整指南：策略和最佳实践

使用这 18 种开发工具来提高你的工作效率 🚀🔥

如何将您的工作流程提高 10 倍：17 个必备应用程序

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

成功云迁移的完整指南：策略和最佳实践

使用这 18 种开发工具来提高你的工作效率 🚀🔥

如何将您的工作流程提高 10 倍：17 个必备应用程序

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps