跳到内容
  • 福昕首页
  • 开发中心
  • SDK文档资料
  • 福昕首页
  • 开发中心
  • SDK文档资料
申请试用
  • 企业自动化
    • Compressor
  • 福昕CloudAPI
  • 福昕PDF SDK 软件开发工具包
    • 福昕PDF SDK(ActiveX)
    • 福昕PDF SDK(桌面/服务器)
    • 福昕PDF SDK(Plug-in)
    • 福昕 PDF SDK(安卓)
    • 福昕PDF SDK(iOS)
    • 福昕PDF SDK(Web)
  • 福昕管理控制台
    • 公有云
    • 私有云
    • 通用情况
  • 福昕阅读器
    • RMS插件
  • 福昕高级编辑器
    • AI助手
    • Mac版本
      • 常规问题
    • windows版本
      • ECM集成
      • 互联PDF
      • 企业管理指南
      • 保护
      • 内容编辑
      • 创建PDF
      • 压缩
      • 图章
      • 安装与卸载
      • 常见问题
      • 打印
      • 注释/评论
      • 福昕插件
      • 翻译助手
      • 翻译助手教程
      • 试用与激活
      • 转换
      • 页面管理
    • 教育用户
      • 论文查重
      • 论文畅
      • 操作指南
    • 网页版
      • 电子签章
    • 订阅
    • 资源
  • 福昕高级编辑器Linux版本
  • 福船图纸管理系统
  • 福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)
  • 标签:
  • UI扩展,WebSDK,事件监听,数字签名,签名域,自定义按钮,表单

在WebSDK实现放置签名

  • 福昕知识库
  • 2025-07-04

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

实现原理

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

实现步骤

  1. 添加自定义按钮
    参考开发者手册中的UI扩展章节,在工具栏添加签名按钮:可扩展组件概述
  2. 完整实现代码
    如下代码展示了完整的实现逻辑:
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'
        });

相关内容

解决自定义Item添加铅笔注释后保存内容丢失的问题​

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

如何设置Word/Excel/PPT转PDF的默认引擎(微软Office或WPS)?

福昕PDF编辑器(移动端)常用功能指南:编辑、高亮、标注、新建页面……

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

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

PDF书签跳转后缩放被重置?承前缩放:一招锁定阅读比例!

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

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

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

推荐内容

解决自定义Item添加铅笔注释后保存内容丢失的问题​

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

如何设置Word/Excel/PPT转PDF的默认引擎(微软Office或WPS)?

福昕PDF编辑器(移动端)常用功能指南:编辑、高亮、标注、新建页面……

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

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

PDF书签跳转后缩放被重置?承前缩放:一招锁定阅读比例!

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

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

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

产品
  • 应用行业
  • 白皮书
开发支持
  • 开发中心
  • SDK文档资料

销售咨询:010-50951668

客服电话:0591-38509808

销售咨询
微信公众号

©2025 福建福昕软件开发股份有限公司 版权所有

隐私策略