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

福昕PDF SDK 软件开发工具包 > 福昕PDF SDK(Web)

标签:

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

福昕知识库
2024-10-31

问题背景

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

解决方法

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

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

对于新增注释，除了在注释添加时动态修改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属性");
    }
})

对于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属性");
        }
    });
}

【校园昕积分】邀请攻略：使用福昕合作高校发放教育专用激活码激活

【校园昕积分】邀请攻略：使用CARSI高校账户或高校EDU邮箱注册

在福昕高级PDF编辑器中如何自定义快速访问工具栏

在福昕高级PDF编辑器中如何设置常用图章

在对文件虚拟打印后如何设置文件不自动打开

通知消息关闭后如何开启

PDF文件奇偶页差异化页码添加

Web SDK 开发实战：动态自定义 PDF 注释右键菜单的 JavaScript 实现方案

无法安装服务“Foxit Document Management”(FoxitAssistantSvcPlus)

将3D文件添加作为信任文件