福昕开发者文档中心

ViewerUI ​

概述 ​

ViewerUI 提供了一系列用于创建和管理用户界面组件的方法。这些方法可以被 PDFViewCtrl 和 UIExtension 调用，用于实现自定义 UI 元素，如：

  • 右键菜单
  • 警告弹框
  • 加载遮罩层 等界面功能。

提示: 完整的 ViewerUI

接口定义请参考 API Reference。

内置实现 ​

SDK 提供了两种内置的 ViewerUI 实现：

  1. PDFViewCtrl 的 TinyViewerUI
  2. UIExtension 的 XViewerUI

核心方法 ​

createContextMenu ​

创建并注册上下文菜单组件。

typescript
function createContextMenu(
    key: any,           // 菜单实例所有者
    anchor: HTMLElement,// 响应右键事件的元素
    config: {
        selector: string,           // 触发菜单的CSS选择器
        items: Array<{             // 菜单项配置
            nameI18nKey: string,   // 菜单项的国际化文本键
            // ... 其他菜单项配置
        }>
    }
): IContextMenu | undefined

提示：返回 undefined

表示不显示指定目标的右键菜单。完整配置项请参考 JQuery contextmenu plugin。

对话框相关方法 ​

typescript
// 警告对话框
function alert(message: string): Promise<void>

// 确认对话框
function confirm(message: string): Promise<void>

// 文本输入对话框
function prompt(
    defaultValue: string,
    message: string,
    title: string
): Promise<string>

// 密码输入对话框
function promptPassword(
    defaultValue: string,
    message: string,
    title: string
): Promise<string>

其他工具方法 ​

typescript
// 显示加载遮罩层
function loading(coverOn: HTMLElement): Function

// 创建文本选择工具提示
function createTextSelectionTooltip(
    pageRender: PDFPageRender
): IFloatingTooltip

自定义实现 ​

基于 UIExtension 自定义 ​

javascript
class CustomViewerUI extends UIExtension.XViewerUI {
    alert(message) {
        // 自定义 alert 实现
        console.log('Custom alert:', message);
        return Promise.resolve();
    }
}

new PDFUI({
    viewerOptions: {
        viewerUI: new CustomViewerUI()
    }
})

基于 PDFViewCtrl 自定义 ​

javascript
class CustomViewerUI extends PDFViewCtrl.viewerui.TinyViewerUI {
    alert(message) {
        // 自定义 alert 实现
        console.log('Custom alert:', message);
        return Promise.resolve();
    }
}

new PDFViewer({
    viewerUI: new CustomViewerUI()
})