# 表单交互模式
在 Foxit PDF SDK for Web 中,表单的交互模式分为两种: 设计模式和填表模式。这两种模式分别针对不同的用户场景,旨在帮助开发者和用户更高效地完成表单的设计和填写。
# 概述
# 设计模式
在设计模式下,用户可以编辑表单域并设置其属性。具体功能包括:
- 选择表单域:支持选择特定类型或所有表单域。
- 编辑操作:支持拖放、删除、对齐等操作。
- 右键菜单:提供更多高级操作选项,如表单域属性设置、复制粘贴等。
注意: 设计模式的相关功能依赖于 UIExtension
和 form-designer-v2
addon 来实现。如果您的应用是基于 PDFViewCtrl 开发的,则需要自行实现设计模式。
# 填表模式
填表模式是表单的默认模式,用户在此模式下可以填写表单内容。具体功能包括:
- 数据输入:支持文本、日期、选择框等各类表单域的输入。
- 动作触发:与表单交互触发动作。
- 签名域:点击签名域触发签名或验签功能。
# 交互模式的 API
Foxit PDF SDK for Web 提供了以下 API,用来帮助开发者更好地管理表单的交互模式。
# FormDesignMode
(opens new window) 枚举
FormDesignMode
(opens new window) 枚举用于表示表单的当前交互模式,定义如下:
export enum FormDesignMode {
NONE,
PUSH_BUTTON_AND_IMAGE,
CHECK_BOX,
RADIO_BUTTON,
COMBO_BOX,
LIST_BOX,
TEXT_AND_DATE,
SIGNATURE,
ALL_WIDGET_TYPES
}
枚举值 NONE
表示当前处于填表模式,而 ALL_WIDGET_TYPES
表示所有表单域都处于设计模式,通常在用户设置当前的 state handler 工具为 STATE_HANDLER_NAMES.STATE_HANDLER_SELECT_ANNOTATION
时生效。
此外,其他表单创建工具的枚举值则对应于特定表单域类型的设计模式。例如,当用户选择 STATE_HANDLER_NAMES.STATE_HANDLER_CREATE_FIELD_PUSH_BUTTON
作为当前的表单创建工具时,相应的交互模式会被设置为 PUSH_BUTTON_AND_IMAGE
。这样,开发者可以根据需要更方便地切换和管理各种交互模式。
# FormFillerService.onDesignModeChange
(opens new window)
FormFillerService.onDesignModeChange
(opens new window) 是一个事件监听方法,用于监听表单交互模式的变化。开发者可以订阅该事件,以便在模式切换时执行自定义逻辑:
const formFillerService = pdfviewer.getFormFillerService();
formFillerService.onDesignModeChange((mode) => {
console.log('表单交互模式发生变化:', mode);
// 这里可以添加根据模式变化而执行的代码
});
# FormFillerService.getDesignMode
(opens new window)
FormFillerService.getDesignMode
(opens new window) 方法用于获取表单的当前交互模式:
const formFillerService = pdfviewer.getFormFillerService();
const currentMode = formFillerService.getDesignMode();
console.log('当前表单模式:', FormDesignMode[currentMode]);
# FormFillerService.setDesignMode
(opens new window)
FormFillerService.setDesignMode
(opens new window) 方法允许开发者动态切换表单的交互模式。Foxit PDF SDK for Web 在切换 state-handler 时会自动切换表单的交互模式,因此,开发者通常不需要直接调用这个方法。
const formFillerService = pdfviewer.getFormFillerService();
formFillerService.setDesignMode(FormDesignMode.PUSH_BUTTON_AND_IMAGE);