自定义签名UI的完整指南

福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)

标签:
Fragments,Signature,UI组件,签名,签名处理器,自定义签名UI

福昕知识库
2025-09-28

在福昕PDF SDK for Web 11.0.0 及之后的版本中，实现自定义签名UI主要通过以下核心方式：

通过UI方式交互式创建签名

在工具栏的 Form 选项卡中点击 signature 按钮，会切换到 CreateSignStateHandler 状态。
在页面上单击并拖动鼠标来绘制一个签名域矩形框。
完成后，系统会弹出对话框让您设置签名信息（如签署者、原因等），确认后即可完成签名。

编程式自定义签名处理逻辑

通过 pdfui.registerSignHandler 方法注册自定义的签名处理器，以决定签名时的具体行为（例如，使用特定算法、连接您的签名服务等）。
通过 pdfui.setVerifyHandler 方法注册验证处理器，用于自定义签名验证的逻辑。

核心代码实现

// 注册签名处理器
pdfui.registerSignHandler({
    filter: "Adobe.PPKLite",
    subfilter: "adbe.pkcs7.sha1",
    flag: 0x100,
    distinguishName: "e=your-email@example.com",
    location: "Location",
    reason: "Signing Reason",
    signer: "Signer Name",
    showTime: true,
    sign: (setting, plainContent) => {
        // 将数据发送到您的后端服务进行签名
        return requestData("post", "您的签名服务URL/digest_and_sign", "arraybuffer", {
            plain: plainContent,
        });
    },
});

// 设置签名验证处理器
pdfui.setVerifyHandler((signatureField, plainBuffer, signedData) => {
    // 将数据发送到您的后端服务进行验证
    return requestData("post", "您的验证服务URL/verify", "text", {
        filter: signatureField.getFilter(),
        subfilter: signatureField.getSubfilter(),
        signer: signatureField.getSigner(),
        plainContent: new Blob([plainBuffer]),
        signedData: new Blob([signedData]),
    });
});

自定义UI组件与布局

您可以通过重写 viewerUI 或使用 Fragments 配置来深度自定义UI组件，例如修改右键菜单、工具栏按钮等。
通过继承和扩展 UIExtension.appearances.AdaptiveAppearance 并重写其 getDefaultFragments 方法，可以插入、替换或移除特定的UI元素。

如果您需要实现高度定制化的签名外观或交互流程，建议参考 SDK 提供的自定义注释弹出窗口和通过 Fragments 自定义组件示例，这些示例提供了修改默认UI行为和插入自定义组件的实践方法。

云文档列表右键菜单与程序语言不一致

如何重复使用区域高亮的功能

如何在页面中总是显示文档页面大小

云文档列表右键菜单与程序语言不一致

如何重复使用区域高亮的功能

如何在页面中总是显示文档页面大小

如何实现总是在新窗口中打开文件

如何实现PDF批量转换为word

如何设置编辑器默认启动界面

复制标注粘贴到另一文档后方向变化

在PDF文档上添加图片章打印不显示图章

虚拟打印时如何保持原始文档的页面方向混排模式

如何给PDF文档自动创建书签

云文档列表右键菜单与程序语言不一致

如何重复使用区域高亮的功能

如何在页面中总是显示文档页面大小

如何实现总是在新窗口中打开文件

如何实现PDF批量转换为word

如何设置编辑器默认启动界面

复制标注粘贴到另一文档后方向变化

在PDF文档上添加图片章打印不显示图章

虚拟打印时如何保持原始文档的页面方向混排模式

如何给PDF文档自动创建书签