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

如何在WebSDK中设置选中文本后不显示选择提示控件

如何设置Word/Excel/PPT转PDF的默认引擎（微软Office或WPS）？

多个PDF文档搜索同一关键词，并导出数据，如何操作？

如何一次性修改PDF文档中的字体？

如何获取服务器ID以更新福昕管理后台授权？

如何在WebSDK中设置选中文本后不显示选择提示控件

如何设置Word/Excel/PPT转PDF的默认引擎（微软Office或WPS）？

多个PDF文档搜索同一关键词，并导出数据，如何操作？

如何一次性修改PDF文档中的字体？

如何获取服务器ID以更新福昕管理后台授权？

PDFViewCtrl移动端集成：禁用WebViewer双击注释弹窗的代码实现

安装时提示无法访问 Windows Installer 服务

使用WebSDK在PDF文档中添加Path对象的方法

「WebSDK高效交互」一键进入PDF正文编辑模式的技术实现

福昕PDF打印管理器Pagelist参数格式规范

如何在WebSDK中设置选中文本后不显示选择提示控件

如何设置Word/Excel/PPT转PDF的默认引擎（微软Office或WPS）？

多个PDF文档搜索同一关键词，并导出数据，如何操作？

如何一次性修改PDF文档中的字体？

如何获取服务器ID以更新福昕管理后台授权？

PDFViewCtrl移动端集成：禁用WebViewer双击注释弹窗的代码实现

安装时提示无法访问 Windows Installer 服务

使用WebSDK在PDF文档中添加Path对象的方法

「WebSDK高效交互」一键进入PDF正文编辑模式的技术实现

福昕PDF打印管理器Pagelist参数格式规范