本文介绍 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);
});
})
方法一移除数字图章,方法二自定义图章列表,两种方法可单独或配合使用。