福昕开发者文档中心

自定义签名 UI ​

概述 ​

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

核心接口说明 ​

IViewerUI.getSignatureUI() ​

功能描述 ​

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

方法定义 ​

typescript
getSignatureUI(): Promise<ISignatureUI>;

ISignatureUI ​

功能描述 ​

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

方法列表 ​

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

对话框接口详解 ​

文档签名(ISignDocDialog) ​

功能描述 ​

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

方法说明 ​

typescript
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;
}

示例 ​

typescript
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) ​

功能描述 ​

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

方法说明 ​

typescript
interface ISignVerifiedResultDialog {
    // 显示验签结果
    openWith(signature: ISignatureField): Promise<void>;

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

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

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

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

示例 ​

typescript
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) ​

功能描述 ​

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

方法说明 ​

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

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

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

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

示例 ​

typescript
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();
    }
}

集成示例 ​

typescript
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. 兼容性

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

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