Web SDK

Основные возможности

Сведения о плагинах

Ядро Univer PDFs предоставляет полноценный PDF Unit, постоянный слой правок и браузерную рабочую область. Импортированное содержимое PDF остаётся исходной основой, а принятые изменения сохраняются в снимке Unit и отображаются как текущее состояние документа.

Возможности

  • Модель PDF Unit: хранит исходный документ, структуру страниц, ресурсы и постоянные правки в IPdfUnitData.
  • Операции со страницами и элементами: поддерживает навигацию и вставку страниц, а также редактируемый текст, списки, таблицы, изображения, разделители и аннотации.
  • Браузерная рабочая область: отображает страницы PDF и миниатюры, предоставляет выделение, элементы редактирования, буфер обмена и инспектор.
  • Конвейер команд: применяет принятые изменения через постоянные команды и пакеты мутаций, чтобы сохранение, отмена и повтор использовали одну модель.
  • Facade API: создаёт, находит, изменяет и сохраняет PDF Unit через объекты PDF, страниц, элементов и исходного текста.

Режим пресетов

Univer PDFs пока не предоставляет пакет пресета. Создавайте приложения PDF в режиме плагинов.

Режим плагинов

Установка

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 } }. Приложение с совместным редактированием может дополнительно подключить @univerjs-pro/pdfs-editor вместе с необходимыми ему плагинами совместной работы.

Средства редактирования и просмотра

На начальной вкладке доступны копирование, вырезание, вставка, режим инструмента и аннотации. Вставка содержит страницы, текстовые блоки, абзацы, списки, таблицы, изображения и разделители. Просмотр содержит масштаб, полноэкранный режим, видимость аннотаций и непрерывную прокрутку. Выбор текста или таблицы открывает контекстные элементы, включая инспектор и стили таблицы. Для этих элементов ленты оставьте стандартное editor.enabled: true в UniverPdfsUIPlugin.

Порядок меню и сеточная раскладка

Задайте menu и ribbonType при существующей регистрации UniverUIPlugin. Это параметры общего UI, а не UniverPdfsUIPlugin. В примере используются реальные идентификаторы пунктов меню PDFs:

Начальная настройка

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 сортирует вкладки, группы или пункты одного уровня по возрастанию и не переносит пункты в другую группу. Идентификатор пункта можно получить из атрибута data-u-command; он не обязательно совпадает с идентификатором команды.

Обновление во время работы

Импортируйте @univerjs/ui/facade перед созданием univerAPI через FUniver.newAPI(univer). 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 лента продукта не регистрируется. Переопределения меню не создают незарегистрированные кнопки.

Для своих кнопок и пунктов, открывающих подменю, createMenu() и createSubmenu() также принимают order и gridLayout; вызовите appendTo() для регистрации. На содержимое всплывающего меню сетка Ribbon не распространяется.

Насколько полезно это руководство?

© 2026 DreamNum Co., Ltd.