表单
WebViewer 支持 AcroForm 字段——文本框、复选框、单选按钮、列表框、组合框和按钮——以及表单字段创建面板和属性面板。本指南介绍 UI 侧表单 API。
表单字段数据模型与 PDF 集成位于闭源 Core 引擎(
packages/core/src/form/)。UI 层通过 core 桥接层驱动,并在documentstore 中镜像表单状态。
表单字段类型
| 字段 | 工具名 | 说明 |
|---|---|---|
| 文本框 | Textfield | 单/多行文本输入。 |
| 复选框 | Checkbox | 勾选样式可配置。 |
| 单选按钮 | Radiobutton | 分组。 |
| 列表框 | Listbox | 选择一项。 |
| 组合框 | Combobox | 下拉。 |
| 按钮 | Pushbutton | 动作按钮(文本、链接等)。 |
| 签名 | Signature | 见 签名。 |
UI API
UI.setFormBoardFold(fold)
折叠或展开表单面板。
UI.setFormBoardFold(true); // 折叠切换 viewer store 中的 formBoardFold,控制表单字段创建面板的可见性。
UI.setFormBoardPosition(position)
设置表单面板位置。
UI.setFormBoardPosition({ left: 100, top: 200 }); // 或预设字符串设置 viewer store 中的 formBoardPosition { left, top }。
UI.setHighlightForm(value)
切换表单字段高亮。
UI.setHighlightForm(true);调用 useDocument.setHighlightForm(value),存储标志并通过 core.setHighlightForm 推送到引擎。
表单面板
components/FormBoard/FormBoard.vue 是表单字段创建面板,在表单工具栏分组激活时渲染于头部下方。它提供字段创建工具;选择某个工具通过 setToolState 激活对应工具,后者调用 core.setTool 和 core.setInitProperty 为新字段设置默认样式。
面板状态位于 viewer store:formBoardFold、formBoardPosition、enableFillForm、skipNoRequired、consecutiveType。
表单属性面板(右面板)
右面板(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 | 自动跳到下一个签名字段。 |
示例
高亮表单字段
UI.setHighlightForm(true);打开表单属性面板并切到 Appearance
UI.openElement('rightPanel');
UI.setActiveElementTab('rightPanel', 'Appearance');自动跳到下一个签名字段
UI.setAutoJumpNextSign(true); // 同时推送到 core