跳到内容
  • 福昕首页
  • 开发中心
  • 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
      • 压缩
      • 图章
      • 安装与卸载
      • 常见问题
      • 打印
      • 注释/评论
      • 福昕插件
      • 翻译助手
      • 翻译助手教程
      • 试用与激活
      • 转换
      • 页面管理
    • 教育用户
      • 论文查重
      • 论文畅
      • 操作指南
    • 网页版
      • Foxit eSign
      • 电子签章
    • 订阅
    • 资源
  • 福昕高级编辑器Linux版本
  • 福船图纸管理系统
  • 福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)
  • 标签:
  • JavaScript,PDFUI,PDF教程,列表,前端开发,替换,电子图章

PDFUI 图章列表自定义教程:替换内置图章的两种方法

  • 福昕知识库
  • 2026-04-01

本文介绍 PDFUI 图章列表的两种自定义方法:一是在实例化时移除内置的“数字图章”组件,二是通过 initAnnotationIcons 接口重置整个图章列表数据。

方法一:移除内置的“数字图章”组件

在实例化 PDFUI 对象时,通过 fragments 参数移除组件名称为 create-digital-stamp-list 的数字图章组件。示例代码如下:

var Events = UIExtension.PDFViewCtrl.Events;
var pdfui = new UIExtension.PDFUI({
viewerOptions: {
libPath: ‘../../../lib’,
jr: {
readyWorker: readyWorker
},
},
renderTo: ‘#pdf-ui’,
appearance: UIExtension.appearances.adaptive,
fragments: [{
target: ‘create-digital-stamp-list’,
action: UIExtension.UIConsts.FRAGMENT_ACTION.REMOVE
}],
addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile ?
‘../../../lib/uix-addons/allInOne.mobile.js’ : ‘../../../lib/uix-addons/allInOne.js’
});

方法二:重置图章列表信息

图章文件类型支持 bmp、jpg、jpeg、png、tif、tiff 和 pdf。对于 tif、tiff 和 pdf 类型,还需提供相同前缀的 svg 文件以便在图章列表中显示。希望缩放不失真建议选择 svg 矢量格式,此时 fileType 设为 pdf,url 配置为 PDF 文件路径,同尺寸 svg 图标放在 pdf 同级目录下。width 和 height 分别设置图章放置在页面上的默认大小。

图章列表数据示例代码如下:

var newStampIconsList = [{
annotType: ‘stamp’,
category: ‘类别1’,
name: ‘孟庆华’,
url: “http://10.204.1.109:8081/CustomStaticStamps/CircleStampStatic.png”,
fileType: “png”,
width: 200,
height: 200
}, {
annotType: ‘stamp’,
category: ‘类别1’,
name: ‘非矢量的椭圆章’,
url: “http://10.204.1.109:8081/CustomStaticStamps/OvalStamp.png”,
fileType: “png”,
width: 225,
height: 135,
}, {
annotType: ‘stamp’,
category: ‘类别2’,
name: ‘矢量的椭圆章’,
url: “http://10.204.1.109:8081/CustomStaticStamps/OvalStamp.pdf”,
fileType: “pdf”,
width: 225,
height: 135,
}];

调用 initAnnotationIcons 接口重置图章列表,示例代码如下:

pdfui.eventEmitter.on(PDFViewCtrl.constants.ViewerEvents.renderFileSuccess, (pdfDoc) => {
pdfui.getPDFViewer().then(async function(pdfViewer) {
pdfViewer.initAnnotationIcons(newStampIconsList);
});
})

方法一移除数字图章,方法二自定义图章列表,两种方法可单独或配合使用。

免费获取SDK试用

相关内容

3D 模型交互状态通知与实时坐标获取方法

PDF后台批量处理:如何将文档保存为线性化格式(福昕SDK教程)

【合同/协议必备】PDF一键盖骑缝章,防换页防篡改!

在执行文件打印时如何将默认的打印数量设置为1

PDF字体嵌入教程:如何将文档中使用到的所有字体完全嵌入

福昕2026版新增PDF转CAD,DWG/DXF一键搞定!

在合并文件时如何统一设置页面大小

文件每次打开时缩放比例都是200%如何将缩放比例调整为100%

如何查看查看PDF/A的版本信息

如何使用电子签章对内签署

推荐内容

3D 模型交互状态通知与实时坐标获取方法

PDF后台批量处理:如何将文档保存为线性化格式(福昕SDK教程)

【合同/协议必备】PDF一键盖骑缝章,防换页防篡改!

在执行文件打印时如何将默认的打印数量设置为1

PDF字体嵌入教程:如何将文档中使用到的所有字体完全嵌入

福昕2026版新增PDF转CAD,DWG/DXF一键搞定!

在合并文件时如何统一设置页面大小

文件每次打开时缩放比例都是200%如何将缩放比例调整为100%

如何查看查看PDF/A的版本信息

如何使用电子签章对内签署

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

销售咨询:010-50951668

客服电话:0591-38509808

销售咨询
微信公众号

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

隐私策略