WebSDK通过 Fragments 自定义菜单栏显示

一、核心说明

福昕软件PDF Web SDK提供了 Fragments 轻量化 UI 扩展能力，支持开发者根据客户需求快速修改菜单栏的显示效果，无需复杂重构。通过 Fragments 可实现「修改菜单名称、移除菜单、替换图标、自定义样式」等常见需求，操作灵活且无侵入性，核心依赖 SDK 内置的 target 目标标识、action 操作类型及 config 配置参数。

二、前置准备

已集成福昕软件 PDF Web SDK 并初始化成功；
了解目标菜单 / 按钮的 target 标识（可通过 SDK 文档查询或浏览器调试工具获取）；
自定义样式 / 图标时，需提前准备好 CSS 样式及图标资源（如自定义图标图片）。

三、常见自定义场景（含实操示例）

场景 1：修改菜单栏 / 按钮的显示名称

功能说明:适用于需要将默认菜单名称替换为自定义文本（如英文、个性化名称）的场景，支持 tab 页、功能按钮等名称修改。

// 示例：将「编辑」tab 页的默认名称修改为「edit」
const fragments = [
  {
    target: 'edit-tab', // 目标菜单的 target 标识（SDK 内置，需准确匹配）
    config: [{ text: 'edit' }] // text 参数指定新的显示名称
  }
];

// 初始化 SDK 时传入 fragments 配置
const pdfui = new UIExtension.PDFUI({
  // 其他基础配置（如 container、license 等）
  fragments: fragments
});

场景 2：移除不需要的菜单栏 / 按钮

功能说明:当客户不需要某些默认菜单（如注释 tab 页、特定功能按钮）时，可通过 `REMOVE` 动作直接移除，简化界面。

const fragments = [
  {
    target: 'comment-tab', // 需移除的菜单 target 标识
    action: UIExtension.UIConsts.FRAGMENT_ACTION.REMOVE // 固定动作：移除
  }
];

场景 3：替换菜单 / 按钮的图标

功能说明:默认图标不符合客户品牌风格时，可替换为自定义图标，支持图标字体、图片图标等形式。

const fragments = [
  {
    target: 'multi-media-btn', // 目标按钮的 target 标识
    config: {
      iconCls: 'custom-multi-media-button-icon' // 自定义图标 CSS 类名
    }
  }
];

关键说明

iconCls 为自定义 CSS 类名，需在样式文件中提前定义；
图标建议使用 SVG 或透明背景 PNG，确保适配不同屏幕尺寸；
若需保留默认图标逻辑，仅修改颜色 / 大小，可直接在 iconCls 中覆盖样式（无需替换背景图）。

场景 4：自定义菜单栏 / 按钮的样式

功能说明:需调整菜单 / 按钮的样式（如颜色、大小、间距、 hover 效果）时，可通过 `cls` 参数绑定自定义 CSS 类，实现个性化样式。

const fragments = [
  {
    target: 'hand-tool', // 目标工具按钮的 target 标识
    config: {
      cls: 'custom-button-css-class' // 自定义样式 CSS 类名
    }
  }
];

关键说明

cls 参数绑定的 CSS 类会追加到目标元素的 class 列表中，需使用 !important 确保优先级高于默认样式；
支持修改任意样式属性（如间距、边框、阴影等），适配客户品牌视觉规范。

四、进阶说明

多场景组合配置：多个自定义需求可合并到一个 fragments 数组中
target 标识查询：若不确定目标元素的 target，可通过以下方式获取：
- 查阅官方文档：Fragment 配置参数说明；
- 浏览器调试工具：右键目标元素 → 「检查」→ 查看元素的 data-target 属性或 class 名称。
更多自定义能力：除上述场景外，Fragments 还支持新增菜单、替换整个 UI 片段等高级功能，详情可参考自定义 UI 完整指南。

五、注意事项

target 标识区分大小写，需严格按照 SDK 文档或调试工具中的实际值填写，否则配置不生效；
自定义样式时，避免修改 SDK 内置 CSS 类名，优先使用 cls 追加自定义类，防止版本更新时样式失效；
自定义图标 / 图片需确保路径正确（建议使用相对路径或 CDN 路径），避免跨域导致图标无法加载。

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

如何使用格式刷

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

如何将水印置于文字下面

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

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

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

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

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

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

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

如何使用格式刷

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

如何将水印置于文字下面

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

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

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

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

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

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