Web SDK

核心功能

插件信息

Univer PDFs 核心功能包括正式的 PDF Unit、持久化编辑层和浏览器工作台。导入的 PDF 内容保留为源基线，已接受的修改则存储在 Unit 快照中，并渲染为当前文档。

功能

  • PDF Unit 模型：在 IPdfUnitData 中存储源文档、页面结构、资源和持久化编辑意图。
  • 页面与元素操作：支持页面导航和插入，以及可编辑的文本、列表、表格、图像、分隔线和批注。
  • 浏览器工作台：提供 PDF 页面渲染、缩略图、选择、编辑控件、剪贴板行为和检查器界面。
  • 命令管线：通过持久化命令和变更批次应用已接受的修改，使保存、撤销和重做共享同一模型。
  • Facade API：通过 PDF、页面、元素和原生文本对象创建、查找、编辑和保存 PDF Unit。

插件模式

安装

Shell
pnpm add @univerjs/core @univerjs/design @univerjs/ui @univerjs-pro/license @univerjs-pro/pdfs @univerjs-pro/pdfs-ui

使用

TypeScript
import { UniverLicensePlugin } from '@univerjs-pro/license'import { UniverPdfsPlugin } from '@univerjs-pro/pdfs'import { UniverPdfsUIPlugin } from '@univerjs-pro/pdfs-ui'import PdfsUIEnUS from '@univerjs-pro/pdfs-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { FUniver } from '@univerjs/core/facade'import DesignEnUS from '@univerjs/design/locale/en-US'import { UniverUIPlugin } from '@univerjs/ui'import UIEnUS from '@univerjs/ui/locale/en-US'import '@univerjs-pro/pdfs/facade'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs-pro/pdfs-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(DesignEnUS, UIEnUS, PdfsUIEnUS),  },})univer.registerPlugin(UniverUIPlugin, { container: 'app' })univer.registerPlugin(UniverLicensePlugin, {  license: process.env.CLIENT_LICENSE_TEXT,})univer.registerPlugin(UniverPdfsPlugin)univer.registerPlugin(UniverPdfsUIPlugin)const univerAPI = FUniver.newAPI(univer)const pdf = univerAPI.createPdf({ name: 'Untitled PDF' })

UniverPdfsPlugin 负责 PDF Unit 和持久化命令，UniverPdfsUIPlugin 负责浏览器查看器及其编辑控件。仅需查看界面时，请用 { editor: { enabled: false } } 注册 UniverPdfsUIPlugin。基于协作的应用可以另外安装 @univerjs-pro/pdfs-editor，并同时注册它依赖的协作插件。

预设模式

Univer PDFs 当前没有提供预设包。请使用插件模式创建 PDF 应用。

菜单顺序与网格布局

在已有的 UniverUIPlugin 注册配置中设置 menu 和 ribbonType。它们属于共享 UI 配置，不应传给 UniverPdfsUIPlugin。下面使用 PDFs 的实际菜单项 ID：

初始化配置

TypeScript
import type { MenuConfig } from '@univerjs/ui'import { UniverUIPlugin } from '@univerjs/ui'const menu: MenuConfig = {  'ribbon.view': { order: -1 },  'ribbon.start.layout': { order: -1 },  'pdf.menu.tool.highlight': {    order: 1,    gridLayout: { row: 2, column: 1 },  },  'pdf.menu.tool.ink': {    order: 0,    gridLayout: { row: 1, column: 1 },  },}univer.registerPlugin(UniverUIPlugin, { container: 'app', ribbonType: 'grid', menu })

order 按数值从小到大排列同级页签、分组或菜单项，不会把菜单项移到其他分组。菜单项 ID 可以从其 data-u-command 属性获取，不应直接假设它与命令 ID 相同。

运行时更新

先导入 @univerjs/ui/facade，再通过 FUniver.newAPI(univer) 创建 univerAPI。updateMenuConfig() 会合并修改、保留未指定的字段并刷新菜单，配置也会应用到后续注册的菜单。

TypeScript
import '@univerjs/ui/facade'univerAPI.updateMenuConfig({  'pdf.menu.tool.highlight': { gridLayout: { row: 2, column: 1, showLabel: true, width: 96 } },})

gridLayout 仅控制网格 Ribbon。每个分组固定两行，row 和 column 从 1 开始。显式坐标优先决定位置，因此交换已占用的单元格时应同时修改两个菜单项，不能只调整 order。未指定的可选字段沿用已有配置或 Schema。跨行、跨列、标签、宽度和图标尺寸见 IRibbonGridLayout。

请保持 UniverPdfsUIPlugin 的编辑功能开启：editor.enabled: false 会跳过该品类 Ribbon 的注册。菜单覆盖配置不会创建尚未注册的按钮。

自定义按钮和子菜单入口也可以通过 createMenu()、createSubmenu() 设置 order 与 gridLayout，然后调用 appendTo() 注册。弹出菜单内部不使用 Ribbon 的网格布局。

你觉得这篇文档如何？

© 2026 DreamNum Co., Ltd.