如何实现左侧边栏注释列表中的条目名称统一显示为图标+注释类型名称?

问题背景

WebSDK中的左侧边栏中,注释列表缺省是以注释类型图标 + 注释作者(注释作者缺省值为“Foxit Web”)作为该条注释的条目名称,但在一些业务场景中,用户希望注释列表区域中的条目名统一显示为图标 + 注释类型名称(即高亮/区域高亮/下划线/删除线/书签/注释/文本批注/备注/箭头/矩形框等),以便使用者可以更快地通过注释的类别定位到所需查看的注释内容。

解决方法

在PDF规范中其实是不存在注释作者这一属性的,通常为符合通用业务场景的用户习惯,WebSDK会将注释的Title属性作为注释作者来使用,所以只需要修改注释的Title属性为对应的注释类型名称即可。

请注意,PDF中的存量注释以及新增注释都应考虑在内。

  1. 对于新增注释,除了在注释添加时动态修改Title属性外,还要考虑到注释作者被修改的情况,这种情况可以通过禁用相关页面元素的样式来控制,或者通过WebSDK监听注释更新的事件,动态修正属性值来实现。

示例代码如下:

//监听新增注释的事件,在其回调函数中动态修改注释对象的Title属性
pdfui.eventEmitter.on(PDF.constant.DataEvents.annotationAdded, (annotations) => {
    if (annotations[0].info.title != annotations[0].info.subject) {
        annotations[0].setTitle(annotations[0].info.subject);
    } else {
        console.log("无需修改注释的Title属性");
    }
})
//监听注释更新的事件,在其回调函数中动态修改注释对象的Title属性
pdfui.eventEmitter.on(PDF.constant.DataEvents.annotationUpdated, (annots, PDFPage, AnnotUpdatedType) => {
    if (annots[0].info.title != annots[0].info.subject) {
        annots[0].setTitle(annots[0].info.subject);
    } else {
        console.log("无需修改注释的Title属性");
    }
})
  1. 对于PDF中的存量注释,可利用WebSDK提供的API接口,遍历所有注释对象,动态修改其Title属性。

示例代码如下:

//获取当前PDF文件的Doc对象
var pdfdoc = await pdfui.getCurrentPDFDoc();
//获取当前PDF文件的页数
var pageCount = await pdfdoc.getPageCount();

//遍历获取每一个page对象
for (let index = 0; index < pageCount; index++) {
    var page = await pdfdoc.getPageByIndex(index);
    var annots = await page.getAnnots();

    annots.forEach(annot => {
        if (annot.info.title != annot.info.subject) {
              annot.setTitle(annot.info.subject);
        } else {
              console.log("无需修改注释的Title属性");
        }
    });
}