自定义右侧边栏选项卡：动态控制与事件集成指南

用户自定义函数

function testFun() {
    alert("Button was Clicked !");
}

控制器注册与业务逻辑集成

使用 @controller 指令将控件类附加到组件。以下代码创建名为 "custom" 的模块，并注册两个控件类 MyController1 和 MyController2，用于在自定义UI中集成业务功能：
UIExtension.PDFUI.module('custom', [])
.controller('MyController1', {
handle: function () {
alert('diyBtn was clicked !');
}
})
.controller('MyController2', {
handle: function () {
alert('The document will be closed !');
pdfui.close();
}
});

实现自定义右侧边栏选项卡

以下函数用于在PDFUI内置右侧侧边栏中插入新的选项卡面板，并为面板元素添加事件监听器：

async function insertDIYRightSidebarTab() {
    // 获取名为'sidebar-right-tabs'的组件对象，这是一个容器组件，包含多个选项卡面板。
    const sidebarRightTabs = await pdfui.getComponentByName('sidebar-right-tabs');
    // 向右侧侧边栏的选项卡容器组件中插入一个新的选项卡面板，sidebar-tab-panel标签内包含的代码，可以根据业务需要进行自定义
    sidebarRightTabs.insert(`
        <sidebar-tab-panel name="diy-customer-panel" tab-title="自定义右侧边栏选项卡">
            <div style="color:red">
                <span>这个区域可以自定义设计</span><hr />
                <ribbon-button icon-class="fv__icon-toolbar-hand" name='diyBtn' text="复用了手型工具图标" @controller="custom:MyController1"></ribbon-button>
                <open-file-ribbon-dropdown></open-file-ribbon-dropdown>
                <download-file-button></download-file-button>
            </div>
            <hr />
            <xbutton name="closeDoc"  text="关闭文档" @controller="custom:MyController2"></xbutton>
            <button onclick="testFun()">原生用法</button>
        </sidebar-tab-panel>
        `);
}

动态控制选项卡显示与隐藏

此函数用于展开/折叠右侧边栏选项卡，并控制指定选项卡的可见性：

async function expandOrCollapseSidebarRightTab(componentName, expandedStatus) {
    //获取指定组件名称的选项卡组件对象
    const selectedSidebarRightTab = await pdfui.getComponentByName(componentName);
    //获取右侧侧边栏组件对象
    const sidebarRight = await pdfui.getComponentByName('sidebar-right');
    //获取名为'sidebar-right-tabs'的组件对象，这是一个容器组件，包含多个选项卡面板。
    const sidebarRightTabs = await pdfui.getComponentByName('sidebar-right-tabs');
    //const selectedSidebarRightTab = await pdfui.getComponentByName("diy-customer-panel");
    
    if (expandedStatus) {
        selectedSidebarRightTab.active();//将指定的选项卡面板设置为激活状态，待展示
        sidebarRight.show();//展开右侧侧边栏
    } else {
        // sidebarRightTabs.closeTabFun("diy-customer-panel");
        sidebarRightTabs.closeTabFun(componentName);//关闭指定的选项卡面板
        // sidebarRightTabs.setOpenTabs([]);//清空所有标签页，可按需使用
        sidebarRight.hide();//隐藏右侧侧边栏
    }
}

初始化与功能调用

在PDFUI实例初始化完成后，插入自定义选项卡面板：

pdfui实例初始化完成之后，调用封装好的自定义函数，在PDFUI的内置右侧侧边栏中插入一个新的选项卡面板
pdfui.addUIEventListener(UIExtension.UIEvents.initializationCompleted, async function () {
insertDIYRightSidebarTab();
})

动态控制自定义选项卡的显示与隐藏：

//调用封装好的自定义函数，动态控制自定义Tab面板的出现
expandOrCollapseSidebarRightTab("diy-customer-panel", true);
//expandOrCollapseSidebarRightTab("diy-customer-panel", false);

样式定制：禁用选项卡关闭功能

如果不希望自定义标签页被关闭，可在页面样式中添加以下代码隐藏关闭元素：

.fv__ui-sidebar-right-tabs .fv__ui-sidebar-right-navlist .fv__ui-sidebar-nav-close {
    display: none;
}

如何将彩色PDF一键转为黑白版？

PDFViewCtrl中如何隐藏文本选中菜单

【福昕管理控制台】自动停用功能常见问题解答

如何去除PDF中的水印？

版式识别功能Layout Recognition功能Demo简介

自v2025.2.1和v14.0.1版本开始以及之后的版本，如何获取到msi的包

云文档列表右键菜单与程序语言不一致

如何重复使用区域高亮的功能

如何在页面中总是显示文档页面大小

如何实现总是在新窗口中打开文件