Skip to content
全新发布

PDF SDK 与 AI 文档处理

在 GitHub 获取完整的私有化部署SDK 包及 AI 智能文档处理能力,一键部署,快速构建您的文档处理工作流。

显示/隐藏元素

UI 中几乎每个可见部分都是一个由 data-element 字符串标识的元素。本指南介绍打开/关闭、启用/禁用以及在元素标签页之间切换的 API。

所有标识符集中定义在 packages/webview/src/constants/dataElements.js。viewer store 通过三个映射跟踪它们:

  • activeElements{} — 元素当前是否打开。
  • disabledElements{} — 元素是否从 DOM 卸载({ disabled, style })。
  • activeElementsTab{} — 带标签元素内的活动子标签。

UI API

打开/关闭

javascript
UI.openElement(dataElement)        // 打开一个元素
UI.closeElement(dataElement)       // 关闭一个元素
UI.openElements(dataElements)      // 打开多个:string[]
UI.closeElements(dataElements)     // 关闭多个:string[]
UI.isElementOpen(dataElement)      // => boolean

打开元素会设置 activeElements[dataElement] = true打开一个面板会关闭同侧(左/右)的兄弟面板,因此同一侧一次只打开一个面板。打开左面板会调用 core.toggleSidebar();打开搜索面板还会打开左面板并将其标签切换到搜索标签。

启用/禁用

javascript
/**
 * @method UI.disableElements
 * @param {string[] | string} dataElements 一个 data-element 或数组。
 */
UI.disableElements(['printButton', 'downloadButton']);

/**
 * @method UI.enableElements
 * @param {string[] | string} dataElements 一个 data-element 或数组。
 */
UI.enableElements(['printButton']);

disableElements 会将元素从 DOM 卸载。重要:这仅移除 DOM 节点——不会禁用底层功能。例如,禁用 printButton 会移除按钮,但打印仍可能通过编程方式或键盘触发。要真正禁用某功能,请使用功能专属 API(如引擎的权限 API)。

单个字符串会被当作一个元素分派;数组会作为多个分派。其他类型会记录错误。

活动标签

javascript
UI.setActiveElementTab(dataElement, tab);

设置带标签元素(如 leftPanelrightPanel)内的活动标签。如果元素不是带标签元素,会记录 "DataElement not found." 警告。标签标识符也定义在 dataElements.js(如左面板的 ThumbnailsButtonOutlinesButtonAnnotationButtonLayersButtonSignatureButtonSearchButton;右面板的 GeneralAppearancePreference)。

常用 data-element

面板

leftPanelrightPanelstylePanelpageModePanelstampPanellinkPanelcontentEditorPanelcolorSeparationPanelredactionPanelsearchPanelmeasurePanelfreetextPanel

工具栏/头部按钮

openFileButtonsearchButtonpageModeButtondownloadButtonflattenButtonprintButtonthemesettingButtonfullScreenButtonhandToolButtonzoomOverlayButtoncropPageButton

属性面板按钮

annotationPropertyPanelButtonformPropertyPanelButtonmeasurePropertyPanelButtoneditorPropertyPanelButtonredactionPropertyPanelButton

仅可禁用元素(外壳)

headerpageNavOverlaythumbnailslayersoutlinesannotationsignaturesearch

对话框

signatureDialogcompareSettingDialogsettingsDialogsetPasswordModalsignCreatePaneldownloadSettingDialogprintSettingDialog 等 25+ 个。

确切的 camelCase/kebab-case 字符串定义在 constants/dataElements.js;请始终引用常量而非猜测字符串。

示例

启动时左面板关闭并精简工具栏

javascript
UI.closeElement('leftPanel');
UI.disableElements(['printButton', 'downloadButton', 'flattenButton']);

打开右面板并切到 Appearance 标签

javascript
UI.openElement('rightPanel');
UI.setActiveElementTab('rightPanel', 'Appearance');

切换通过 addCustomModal 注册的自定义弹窗

自定义弹窗使用相同的元素 API 通过其 dataElement 控制:

javascript
UI.addCustomModal({ dataElement: 'myModal', /* … */ });
UI.openElement('myModal');
// 之后
UI.closeElement('myModal');
// 或完全移除
UI.disableElements(['myModal']);

内部行为说明

  • openElement(dataElement, capability?) ——可选第二参数是某些调用方使用的内部能力标志。
  • 关闭左面板还会调用 core.webViewerPageMode('none') 并关闭搜索面板。
  • setActiveElementTabThumbnailsButton 映射为 core.webViewerPageMode('thumbs')OutlinesButton 映射为 'outline'
  • 移动端守卫:setActiveToolMode 在移动端阻止 separation / measurement 并显示不支持移动端对话框;setToolbarGroup 有相同守卫。

相关