Skip to content
全新发布

PDF SDK 与 AI 文档处理

在 GitHub 获取完整的私有化部署SDK 包及 AI 智能文档处理能力,一键部署,快速构建您的文档处理工作流。

表单

WebViewer 支持 AcroForm 字段——文本框、复选框、单选按钮、列表框、组合框和按钮——以及表单字段创建面板和属性面板。本指南介绍 UI 侧表单 API。

表单字段数据模型与 PDF 集成位于闭源 Core 引擎(packages/core/src/form/)。UI 层通过 core 桥接层驱动,并在 document store 中镜像表单状态。

表单字段类型

字段工具名说明
文本框Textfield单/多行文本输入。
复选框Checkbox勾选样式可配置。
单选按钮Radiobutton分组。
列表框Listbox选择一项。
组合框Combobox下拉。
按钮Pushbutton动作按钮(文本、链接等)。
签名Signature签名

UI API

UI.setFormBoardFold(fold)

折叠或展开表单面板。

javascript
UI.setFormBoardFold(true);   // 折叠

切换 viewer store 中的 formBoardFold,控制表单字段创建面板的可见性。

UI.setFormBoardPosition(position)

设置表单面板位置。

javascript
UI.setFormBoardPosition({ left: 100, top: 200 });  // 或预设字符串

设置 viewer store 中的 formBoardPosition { left, top }

UI.setHighlightForm(value)

切换表单字段高亮。

javascript
UI.setHighlightForm(true);

调用 useDocument.setHighlightForm(value),存储标志通过 core.setHighlightForm 推送到引擎。

表单面板

components/FormBoard/FormBoard.vue 是表单字段创建面板,在表单工具栏分组激活时渲染于头部下方。它提供字段创建工具;选择某个工具通过 setToolState 激活对应工具,后者调用 core.setToolcore.setInitProperty 为新字段设置默认样式。

面板状态位于 viewer store:formBoardFoldformBoardPositionenableFillFormskipNoRequiredconsecutiveType

表单属性面板(右面板)

右面板(components/RightPanel/)跨三个标签显示表单字段属性,由 UI.setActiveElementTab('rightPanel', tab) 切换:

标签内容
General字段名、按钮文本(按钮)、可见性、必填/指示符标志。
Appearance填充色、字体颜色/族/样式/大小(签名字段隐藏)。
Preference对齐、默认值、多行(文本框);按钮样式(复选/单选);选项(列表/组合框)。签名字段隐藏。

面板模型是 document store 中的 propertyPanel 对象(fieldName、isHidden、title、fillColor、color、fontName/Style/Weight/Size、textAlignment、contents、isMultiLine、checkStyle、isChecked、actionType、text、url、destPage、items[] 等)。修改通过 core.setPropertyPanel

Core 桥接层(表单接口)

core 桥接层在 instance.Core 上暴露:

函数用途
handleField表单字段处理。
enableSkipNoRequired / disableSkipNoRequired / isSkipNoRequired跳过非必填字段。
setConsecutiveType / getConsecutiveType连续填充类型。
disableFillConsecutively / isFillConsecutively连续填充控制。
getFormSignFilledAndUnfilled已填/未填表单+签名计数。
getRequiredFormSign必填表单/签名字段。
setAutoJumpNextSign自动跳到下一个签名字段。

示例

高亮表单字段

javascript
UI.setHighlightForm(true);

打开表单属性面板并切到 Appearance

javascript
UI.openElement('rightPanel');
UI.setActiveElementTab('rightPanel', 'Appearance');

自动跳到下一个签名字段

javascript
UI.setAutoJumpNextSign(true);   // 同时推送到 core

相关