Foxit PDF SDK For Web - V11.0.4

# 自定义签名 UI

# 概述

从 11.0.0 版本开始，Foxit PDF SDK for Web 提供了一套完整的签名 UI 自定义接口。通过实现 IViewerUI 以及相关接口，开发者可以轻松自定义签名、验签以及签名属性展示等功能界面。这些接口由 Foxit PDF SDK for Web 内部调用，开发者只需按照接口规范实现相应的功能即可。

# 核心接口说明

# IViewerUI.getSignatureUI()

# 功能描述

  • 获取数字签名 UI 管理实例，用于访问签名相关对话框接口
  • 该接口由 Foxit PDF SDK for Web 内部调用，开发者只需实现该方法并返回 ISignatureUI 实例

# 方法定义

getSignatureUI(): Promise<ISignatureUI>;

# ISignatureUI

# 功能描述

  • 签名功能 UI 总控接口，适用于 11.0.0 及更高版本
  • 该接口提供了三个核心对话框的访问入口
  • 该接口由 Foxit PDF SDK for Web 调用，开发者需要实现以下方法

# 方法列表

方法 返回值类型 说明
getSignDocumentDialog() Promise<ISignDocDialog> 返回文档签名对话框实例
getSignVerifiedResultDialog() Promise<ISignVerifiedResultDialog> 返回验签结果对话框实例
getSignedPropertiesDialog() Promise<ISignedSignaturePropertiesDialog> 返回签名属性对话框实例

# 对话框接口详解

# 文档签名(ISignDocDialog)

# 功能描述

  • 该对话框用于处理文档签名
  • 该接口由 Foxit PDF SDK for Web 调用，开发者需要实现以下方法

# 方法说明

interface ISignDocDialog {
    // 打开签名对话框
    openWith(
        signature: Widget,
        okCallback: (data: SignDocInfo) => Promise<void> | void,
        cancelCallback?: () => Promise<void> | void
    ): Promise<void>;

    // 检查对话框是否已打开
    isOpened(): boolean;

    // 获取当前签名组件
    getCurrentSignature(): Widget | undefined;

    // 隐藏对话框
    hide(): void;

    // 释放资源
    destroy(): void;
}

# 示例

class CustomSignDocDialog implements ISignDocDialog {
    private isDialogOpen = false;
    private currentSignature: Widget | undefined;

    async openWith(
        signature: Widget,
        okCallback: (data: SignDocInfo) => Promise<void> | void,
        cancelCallback?: () => Promise<void> | void
    ) {
        this.isDialogOpen = true;
        this.currentSignature = signature;
        
        // 实现自定义对话框逻辑
        showCustomSignDialog(signature, okCallback, cancelCallback);
    }

    isOpened(): boolean {
        return this.isDialogOpen;
    }

    getCurrentSignature() {
        return this.currentSignature;
    }

    hide() {
        this.isDialogOpen = false;
        hideCustomSignDialog();
    }

    destroy() {
        this.hide();
        cleanupResources();
    }
}

# 验签结果(ISignVerifiedResultDialog)

# 功能描述

  • 该对话框用于展示签名验证结果
  • 该接口由 Foxit PDF SDK for Web 调用，开发者需要实现以下方法

# 方法说明

interface ISignVerifiedResultDialog {
    // 显示验签结果
    openWith(signature: ISignatureField): Promise<void>;
    
    // 检查对话框是否已打开
    isOpened(): boolean;

    // 获取当前签名字段
    getCurrentSignature(): ISignatureField | undefined;

    // 隐藏对话框
    hide(): void;

    // 释放资源
    destroy(): void;
}

# 示例

class CustomVerifyDialog implements ISignVerifiedResultDialog {
    private isDialogOpen = false;
    private currentSignature: ISignatureField | undefined;

    async openWith(signature: ISignatureField) {
        this.isDialogOpen = true;
        this.currentSignature = signature;
        
        // 实现自定义验签结果展示逻辑
        showCustomVerifyResult(signature);
    }

    isOpened(): boolean {
        return this.isDialogOpen;
    }

    getCurrentSignature() {
        return this.currentSignature;
    }

    hide() {
        this.isDialogOpen = false;
        hideCustomVerifyResult();
    }

    destroy() {
        this.hide();
        cleanupResources();
    }
}

# 签名属性 (ISignedSignaturePropertiesDialog)

# 功能描述

  • 该对话框用于展示已签名的字段属性
  • 该接口由 Foxit PDF SDK for Web 调用，开发者需要实现以下方法

# 方法说明

interface ISignedSignaturePropertiesDialog {
    // 打开签名属性对话框
    openWith(signature: ISignatureField): Promise<void>;

    // 检查对话框是否已打开
    isOpened(): boolean;

    // 隐藏对话框
    hide(): void;

    // 释放资源
    destroy(): void;
}

# 示例

class CustomPropertiesDialog implements ISignedSignaturePropertiesDialog {
    private isDialogOpen = false;

    async openWith(signature: ISignatureField) {
        this.isDialogOpen = true;
        
        // 实现自定义签名属性展示逻辑
        showCustomSignatureProperties(signature);
    }

    isOpened(): boolean {
        return this.isDialogOpen;
    }

    hide() {
        this.isDialogOpen = false;
        hideCustomSignatureProperties();
    }

    destroy() {
        this.hide();
        cleanupResources();
    }
}

# 集成示例

class CustomSignatureUI implements ISignatureUI {
    async getSignDocumentDialog() {
        return new CustomSignDocDialog();
    }

    async getSignVerifiedResultDialog() {
        return new CustomVerifyDialog();
    }

    async getSignedPropertiesDialog() {
        return new CustomPropertiesDialog();
    }
}

class CustomViewerUI extends PDFViewCtrl.IViewerUI {
    async getSignatureUI() {
        return new CustomSignatureUI();
    }
}

// 初始化时注入自定义 UI
new PDFViewer({
    viewerUI: new CustomViewerUI(),
    // 其他配置...
});

# 注意事项

  1. 接口实现规范

    • 必须严格按照接口定义实现所有方法
    • 确保返回值的类型与接口定义一致

  2. 资源管理

    • 在 destroy() 方法中释放所有相关资源
    • 避免内存泄漏

  3. 异步处理

    • 所有异步方法需正确处理 Promise
    • 确保在操作完成后再 resolve Promise

  4. 兼容性

    • 确保实现的功能与 Foxit PDF SDK for Web 默认行为一致
    • 避免破坏现有签名流程

通过以上接口实现，开发者可以完全自定义签名相关的 UI 界面，同时确保与 Foxit PDF SDK for Web 的无缝集成。

← 签名流程 →