跳到内容
  • 福昕首页
  • 开发中心
  • 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)
  • 标签:
  • PDF.js,stamp,右键菜单,坐标转换,插入签名,签名图片,自定义,页面菜单项

如何在页面的右键菜单项中增加并实现“插入签名图片”的功能?

  • 福昕知识库
  • 2025-06-30

本文档详细介绍如何通过JavaScript代码扩展PDF查看器的右键菜单功能,实现在指定坐标位置插入签名图片的技术方案。该方案基于PDF.js技术栈,适用于需要增强文档交互功能的Web应用场景。

示例代码如下:

				
					var pdfdoc, pageIndex, mouseX, mouseY;
var Events = PDFViewCtrl.constants.ViewerEvents;

pdfui.addViewerEventListener(Events.renderFileSuccess, function (PDFDoc) {
    pdfdoc = PDFDoc;
});

pdfui.eventEmitter.on(Events.rightClickPage, (e) => {
    //获取鼠标点击位置的页面坐标
    pdfui.convertClientCoordToPDFCoord({
        clientX: e.clientX,
        clientY: e.clientY
    }).then(poi => {
        //do something
        console.log("页面点击坐标:", poi.left, poi.top);
        //当前点击的页码
        pageIndex = poi.index;
        //鼠标点击处的x坐标:
        mouseX = poi.left;
        //鼠标点击处的y坐标:
        mouseY = poi.top;
    })
})

pdfui.getComponentByName('fv--contextmenu-item-hand-tool').then(component => {
    component.after(`此处插入签名`, [{
        target: 'custom-contextmenu-item',
        config: {
            callback: function () {
                console.log(pageIndex, mouseX, mouseY);

                //在指定页面的指定位置插入自定义的图章图片
                pdfdoc.getPageByIndex(pageIndex).then(page => {
                    console.log(page);
                    page.addAnnot({
                        type: PDFViewCtrl.PDF.annots.constant.Annot_Type.stamp,
                        rect: {
                            left: mouseX - 50,
                            right: mouseX + 50,
                            top: mouseY + 50,
                            bottom: mouseY - 50
                        }, //图章插入后的默认坐标位置
                        iconInfo: {
                            annotType: PDFViewCtrl.PDF.annots.constant.Annot_Type.stamp,
                            category: "category",
                            name: "name",
                            fileType: "png",
                            url: "http://xxxx/xx.png" //图片地址
                        }
                    });
                });
            }
        }
    }])
})
				
			

相关内容

专业获取当前页面截图的技术实现方案

基于HTTP范围请求的非事件监听式PDF注释数据自动导入方案

基于ActiveX控件的高效PDF阅读水印实现方案

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

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

在WebSDK实现放置签名

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

C#版的福昕SDK, 如何正确释放PDF处理对象以优化内存使用

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

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

推荐内容

专业获取当前页面截图的技术实现方案

基于HTTP范围请求的非事件监听式PDF注释数据自动导入方案

基于ActiveX控件的高效PDF阅读水印实现方案

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

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

在WebSDK实现放置签名

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

C#版的福昕SDK, 如何正确释放PDF处理对象以优化内存使用

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

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

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

销售咨询:010-50951668

客服电话:0591-38509808

销售咨询
微信公众号

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

隐私策略