WebSDK如何设置注释的右键菜单只显示删除

一、功能说明

本文档介绍如何基于福昕 PDF Web SDK（WebSDK）自定义注释右键菜单：仅保留 “删除” 菜单项，并按需定制菜单的视觉样式（如尺寸、颜色、内边距等）。适用于需要简化注释操作、仅保留删除功能的业务场景（如仅允许删除印章 / 普通注释的场景）。

二、前置条件

已集成福昕 PDF Web SDK，且能正常使用注释（Annot）相关功能；
了解 SDK 基础扩展逻辑，熟悉ViewerUI类的重写方式；
参考开发者手册：自定义注释右键菜单。

三、实现步骤

步骤 1：重写 ViewerUI 的 createContextMenu 方法

通过继承PDFViewCtrl.ViewerUI类，重写核心方法createContextMenu，实现菜单选项的过滤和样式定制。

步骤 2：过滤菜单配置（仅保留删除项）

提取原始菜单配置中的 “删除” 项，移除其他所有默认选项，并自定义删除项的显示名称。

步骤 3：定制菜单样式（可选）

动态生成样式标签，覆盖默认菜单的尺寸、颜色、悬浮效果等样式，避免样式污染。

四、完整代码示例

/**
 * PDF SDK Web 注释右键菜单自定义：仅保留删除项 + 样式定制
 * 核心逻辑：重写ViewerUI的createContextMenu方法，过滤菜单项并定制样式
 */
class CustomViewerUI extends PDFViewCtrl.ViewerUI {
  /**
   * 重写创建右键菜单方法
   * @param {Object} owner - 菜单所属对象（此处为AnnotComponent注释组件）
   * @param {Object} anchor - 菜单锚点位置（鼠标右键点击坐标）
   * @param {Object} config - 原始菜单配置（包含所有默认菜单项）
   * @returns {Object} 处理后的右键菜单实例
   */
  createContextMenu(owner, anchor, config) {
    // 仅处理注释组件的右键菜单
    if (owner instanceof PDFViewCtrl.AnnotComponent) {
      // 条件可扩展：如仅处理印章注释，可添加判断 owner.annot.getType() === 'stamp'
      if (owner.annot) {
        // 过滤配置：仅保留删除项
        const customConfig = this.keepOnlyRemoveItem({ ...config });
        // 定制菜单样式（可选，按需启用）
        this.customizeContextMenuStyle();
        // 调用父类方法创建菜单（传入过滤后的配置）
        return super.createContextMenu(owner, anchor, customConfig);
      }
    }
    // 非注释组件的右键菜单，使用默认配置
    return super.createContextMenu(owner, anchor, config);
  }

  /**
   * 过滤菜单配置：仅保留删除项，并修改显示名称
   * @param {Object} config - 原始菜单配置
   * @returns {Object} 仅包含删除项的新配置
   */
  keepOnlyRemoveItem(config) {
    // 边界校验：确保配置和菜单项存在
    if (!config || !config.items) {
      return config;
    }

    const removeItem = config.items.remove;
   

    // 重置items为仅包含删除项的数组（核心：移除其他所有选项）
    config.items = removeItem ? [removeItem] : [];
    return config;
  }

  /**
   * 动态定制右键菜单样式（可选）
   * 逻辑：先移除旧样式避免重复，再新增自定义样式
   */
  customizeContextMenuStyle() {
    // 1. 移除已存在的旧样式（防止重复添加）
    const oldStyle = document.getElementById('annot-menu-style');
    if (oldStyle) {
      oldStyle.remove();
    }

    // 2. 创建新的样式标签并配置自定义样式
    const style = document.createElement('style');
    style.id = 'annot-menu-style';
    const menuItemSelector = ".context-menu-item"; // 菜单项核心选择器

    style.textContent = `
      /* 右键菜单容器样式 */
      .context-menu {
        width: 120px !important; /* 固定宽度 */
        min-width: 120px !important;
        max-width: 120px !important;
        height: auto !important; /* 高度自适应 */
        overflow: hidden !important; /* 防止内容溢出 */
        box-sizing: border-box !important;
      }

      /* 菜单列表样式 */
      .context-menu-list {
        padding: 2px !important; /* 减小内边距 */
        min-width: unset !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
      }

      /* 菜单项基础样式（删除项） */
      ${menuItemSelector} {
        color: #ff4444 !important; /* 文字红色 */
        font-size: 12px !important; /* 小号字体 */
        padding: 6px 12px !important; /* 减小内边距 */
        background-color: #ffff00 !important; /* 黄色背景 */
        border-radius: 4px !important; /* 圆角效果 */
        border: none !important; /* 移除默认边框 */
      }

      /* 菜单项悬浮样式 */
      ${menuItemSelector}:hover {
        background-color: #ffff99 !important; /* 浅黄背景 */
        color: #d32f2f !important; /* 悬浮深红色 */
      }
    `;

    // 将样式添加到页面头部
    document.head.appendChild(style);
  }
}

// 生效自定义ViewerUI（关键：替换SDK默认的ViewerUI）
PDFViewCtrl.ViewerUI = CustomViewerUI;

五、关键配置说明

1. 样式定制（可选）

可根据业务需求修改customizeContextMenuStyle中的样式属性：

调整菜单宽度：修改.context-menu的width值；
修改文字颜色：调整.context-menu-item的color值；
调整背景色：修改.context-menu-item的background-color值；
移除样式定制：删除this.customizeContextMenuStyle()调用即可恢复默认样式。

2. 菜单项扩展（可选）

若需保留多个菜单项（如 “删除”+“属性”），可修改keepOnlyRemoveItem方法：

keepOnlyRemoveItem(config) {
  if (!config || !config.items) return config;
  // 保留删除和属性项
  const keepItems = {
    remove: config.items.remove,
    property: config.items.property
  };
  // 重命名（可选）
  if (keepItems.remove) keepItems.remove.name = '删除';
  if (keepItems.property) keepItems.property.name = '属性';
  // 转换为数组（SDK要求items为数组格式）
  config.items = Object.values(keepItems).filter(Boolean);
  return config;
}

六、使用注意事项

样式定制时需添加!important，确保覆盖 SDK 默认样式；
动态样式会添加到document.head，若页面刷新需重新生成（SDK 初始化时执行即可）；
重写ViewerUI需在 SDK 初始化前完成，否则自定义逻辑不生效；
若菜单不生效，检查PDFViewCtrl对象是否存在，确保 SDK 已正确加载。

七、总结

核心逻辑：通过继承ViewerUI并重写createContextMenu方法，过滤菜单配置仅保留删除项；
样式定制：动态生成样式标签，按需修改菜单尺寸、颜色等视觉属性；
灵活扩展：可通过注释类型筛选、菜单项配置，适配不同业务场景的需求。

如何使用命令行安装EXE的安装包

如何使用格式刷

如何实现批量文档循环打印

如何将水印置于文字下面

如何将电脑系统登录用户名设置为水印

如何对文档局部内容打马赛克

AC超级管理员如何给自己分配产品授权

在制作表单时表单域没有显示高亮该如何解决

如何在创建文件包时在封面页生成目录

如何一键整合多人批注信息