PDF Web SDK：使用 JavaScript 实现下划线注释自动转换为高亮注释

本文介绍如何在 PDF Web SDK（Web PDF Viewer）中，通过 JavaScript 监听注释点击事件（tapAnnotation），实现下划线（Underline）注释自动转换为高亮（Highlight）注释，适用于前端 PDF 注释开发场景。

一、功能说明（Web 场景）

一、功能说明

在 Web PDF 阅读器中，下划线（Underline）和高亮（Highlight）是常见的文本标注方式。在部分业务场景下，需要统一标注形式，例如将用户点击的下划线注释自动转换为高亮注释，以提升阅读体验或满足审阅规范。

本文基于 PDF Web SDK，介绍如何通过 JavaScript 实现该功能。

二、实现思路

实现流程如下：

监听注释点击事件（tapAnnotation）
获取当前选中的注释对象（Annot）
判断注释类型是否为下划线（underline）
获取注释坐标信息（quadPoints）
删除原有下划线注释
在相同位置创建高亮注释（highlight）

示例代码如下：

var selectedAnnot,quadPoints,thePage;

pdfui.addViewerEventListener(PDFViewCtrl.constants.ViewerEvents.tapAnnotation, function (annotRender) {
    //获取选中的注释
    selectedAnnot = annotRender.getAnnot();
    //console.log(selectedAnnot);
    quadPoints = selectedAnnot.getQuadPoints();
    thePage = selectedAnnot.getPage();

    if (selectedAnnot.info.type === 'underline') {
        //移除选中的下划线注释
        thePage.removeAnnotByObjectNumber(selectedAnnot.info.objectNumber);
        var rectArray = [];

        quadPoints.forEach(function (point, index, arr) {
            rectArray[index] = {
                top: point[0].y,
                left: point[0].x,
                bottom: point[3].y,
                right: point[3].x
            };
        });
        //在同样的位置添加一个高亮注释
        thePage.addAnnot({
            flags: 4,
            type: 'highlight',
            rect: {
                left: 0,
                right: 0,
                top: 0,
                bottom: 0
            },
            coords: rectArray
        })
    }
});

一、功能说明（Web 场景）

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

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

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

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

电子签章签署后如何查看相关签署记录

电子签章对外签署如何在软件上实现签署时自动添加签署日期

电子签章对外签署如何在软件上分配印章使用权

电子签章对外签署如何邀请他人签署

电子签章对外签署如何实现签署时自动添加签署日期

电子签章对外签署如何进行文档直接签署