在websdk实现放置签名

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

标签:
UI扩展,WebSDK,事件监听,数字签名,签名域,自定义按钮,表单

福昕知识库
2025-07-04

在一些业务场景中，客户可能需要在文档界面直接进行数字签名操作。当前WebSDK默认需要先设置签名域才能完成签名，这在一定程度上影响了用户体验。特别是当文档已包含签名时，表单域功能按钮会被禁用，此时可以通过自定义按钮的方式实现签名功能。本文介绍的方法适用于WebSDK 11版本。

实现原理

通过扩展UI组件添加自定义签名按钮，利用事件监听机制在用户点击按钮后自动切换至签名域创建模式，并在成功添加签名域后立即触发签名流程。

实现步骤

添加自定义按钮
参考开发者手册中的UI扩展章节，在工具栏添加签名按钮：可扩展组件概述
完整实现代码
如下代码展示了完整的实现逻辑：

var pdfui = new PDFUI({
            viewerOptions: {
                libPath: '../../../lib',
                jr: {
                    readyWorker: readyWorker
                },
            },
            renderTo: '#pdf-ui',
            fragments: [{
                    target: 'comment-tab-group-import-export',
                    template: `
                        <group name="custom-annot-group">
                            <xbutton name="cus-sign-button" icon-class="fv__icon-create-custom-dynamic-stamp-icon"></xbutton>
                        </group>
                    `,
                    action: UIExtension.UIConsts.FRAGMENT_ACTION.AFTER,
                    config: [
                        {
                            target: 'cus-sign-button',
                            callback: async function() {
                                
                                var handlerManager = await pdfui.getStateHandlerManager();
                                await handlerManager.switchTo(PDFViewCtrl.constants.STATE_HANDLER_NAMES.STATE_HANDLER_CREATE_FIELD_SIGNATURE);
                                
                                pdfui.eventEmitter.on(PDF.constant.DataEvents.annotationAdd,async (annotations) => {
                                    console.log(annotations)
                                    
                                    //自动弹出签名设置
                                    if(annotations[0].getType() == 'widget')
                                    {
                                        var annot = annotations[0]
                                        var handlerManager = await pdfui.getStateHandlerManager();
                                        await handlerManager.switchTo(PDFViewCtrl.constants.STATE_HANDLER_NAMES.STATE_HANDLER_HAND);    
                                        
                                        var annotrender =await pdfui.getAnnotRender(annot .getPage().getIndex(),annot.widgetId.objNumber)
                                        var component = await annotrender.getComponent();
                                        await component.startSignWorkflow();                                        
                                        pdfui.eventEmitter.off(PDF.constant.DataEvents.annotationAdd)
                                                        
                                    }

                                })                               

                            }
                        },
                        
                    ]
                }],
            addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile ?
            '../../../lib/uix-addons/allInOne.mobile.js':
            '../../../lib/uix-addons/allInOne.js'
        });

Web SDK UIExtension 右键菜单深度定制指南（基于jQuery-contextMenu）

Web SDK UIExtension 右键菜单深度定制指南（基于jQuery-contextMenu）

如何分别自定义文本类型注释（打字机/文本框/注释框）的默认样式属性

解决旧版本fsdk_SDK.dll编译程序替换高版本dll报错问题

如何正确释放PDF处理对象以优化内存使用

如何总是用文件名作为文档标题

如何设置新建空白页面的尺寸以及横纵置

通过电子签章服务制作图片章时被驳回

如何设置打印页码和文档缩略图显示页码一致

如何对多个文档快速添加密文

福昕PDF编辑器标准版产品如何去除扫描件水印

Web SDK UIExtension 右键菜单深度定制指南（基于jQuery-contextMenu）

如何分别自定义文本类型注释（打字机/文本框/注释框）的默认样式属性

在websdk实现放置签名

解决旧版本fsdk_SDK.dll编译程序替换高版本dll报错问题

如何正确释放PDF处理对象以优化内存使用

如何总是用文件名作为文档标题

如何设置新建空白页面的尺寸以及横纵置

通过电子签章服务制作图片章时被驳回

如何设置打印页码和文档缩略图显示页码一致

如何对多个文档快速添加密文