Foxit PDF SDK For Web - V11.0.2

# 表单交互模式

在 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);

← 表单签名字段 →