如何在树形组件中定义和使用书签面板？

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

如何在树形组件中定义和使用书签面板？

福昕知识库
2025-09-11

在tree组件中定义和使用书签面板需遵循以下步骤：

在树形组件中定义和使用书签面板需遵循以下步骤：

定义书签面板模板结构
使用 <sidebar-panel> 组件包裹 <bookmark-v2:bookmark-tree>，构成书签面板的基础结构。可通过替换内置的精简模板为复杂模板来自定义属性，例如修改类名、图标、标题等：

   <sidebar-panel 
     name="sidebar-bookmark-v2" 
     class="fv__ui-sidebar-bookmark-v2" 
     @tooltip 
     tooltip-placement="right" 
     tooltip-title="sidebar.bookmark.tooltip" 
     title="sidebar.bookmark.title" 
     icon-class="fv__icon-sidebar-bookmark" 
     @lazy-content="active" 
   > 
     <bookmark-v2:bookmark-tree></bookmark-v2:bookmark-tree> 
   </sidebar-panel>

通过事件自定义树节点外观
在树形组件中，可通过监听 create-tree-node 事件修改书签树节点的外观或绑定事件。例如，将节点文本替换为链接：


// 示例：在创建树节点时修改样式
pdfui.on('create-tree-node', (event) => {
// 自定义节点内容或样式
});

集成自定义外观与功能
若需进一步自定义书签右键菜单等交互，需替换预设的右键菜单模板（需指定固定名称 fv--bookmark-contextmenu-v2），例如：

<template id="custom-contextmenu-template"> 
  <contextmenu name="fv--bookmark-contextmenu-v2"> 
    <!-- 自定义菜单项 --> 
  </contextmenu> 
</template>

数据绑定与事件处理
通过 pdfui.getBookmarkDataService() 获取书签数据服务，监听书签添加、修改等事件以同步更新树节点状态：


pdfui.getBookmarkDataService().then(service => {
service.onBookmarkAdded((event) => {
// 处理新增书签的逻辑
});
});

以上步骤结合了书签面板的模板定义、树形组件的事件监听及数据绑定，实现对书签面板的自定义控制。

自定义StorageDriver及事件分发实现指南

如何在自定义 Item 组件中添加清除编辑状态铅笔注释的功能按钮

WebViewer 工程中使用 Template 实现 UI 布局的完整指南

自定义StorageDriver及事件分发实现指南

如何在自定义 Item 组件中添加清除编辑状态铅笔注释的功能按钮

WebViewer 工程中使用 Template 实现 UI 布局的完整指南

PDF文档合并功能实现指南

获取PDF文档各页面旋转角度的方法

【福昕管理控制台】受邀用户邀请重新发送操作指南

基于Nginx的代理服务器配置方案：解决跨域资源共享（CORS）问题

如何导入或导出PDF注释？

如何将PDF转换为图片并设置其分辨率？

PrintManager实现多文件打印

自定义StorageDriver及事件分发实现指南

如何在树形组件中定义和使用书签面板？

如何在自定义 Item 组件中添加清除编辑状态铅笔注释的功能按钮

WebViewer 工程中使用 Template 实现 UI 布局的完整指南

PDF文档合并功能实现指南

获取PDF文档各页面旋转角度的方法

【福昕管理控制台】受邀用户邀请重新发送操作指南

基于Nginx的代理服务器配置方案：解决跨域资源共享（CORS）问题

如何导入或导出PDF注释？

如何将PDF转换为图片并设置其分辨率？