Web SDK

Fonctionnalités principales

Informations sur les plugins

Le noyau d’Univer PDFs fournit une unité PDF formelle, une couche de modifications persistante et un espace de travail dans le navigateur. Le PDF importé reste la source de référence, tandis que les changements acceptés sont enregistrés dans l’instantané de l’unité et affichés comme document courant.

Fonctionnalités

  • Modèle d’unité PDF : conserve le document source, la structure des pages, les ressources et les intentions de modification persistantes dans IPdfUnitData.
  • Opérations sur les pages et les éléments : prend en charge la navigation et l’insertion de pages ainsi que le texte, les listes, les tableaux, les images, les séparateurs et les annotations modifiables.
  • Espace de travail du navigateur : fournit l’affichage des pages PDF, les miniatures, la sélection, les commandes d’édition, le presse-papiers et l’inspecteur.
  • Pipeline de commandes : applique les changements acceptés par des commandes et lots de mutations persistants afin que l’enregistrement, l’annulation et le rétablissement utilisent le même modèle.
  • Facade API : crée, retrouve, modifie et enregistre les unités PDF au moyen d’objets PDF, page, élément et texte natif.

Mode plugin

Installation

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

Utilisation

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 gère l’unité PDF et les commandes persistantes ; UniverPdfsUIPlugin gère le visualiseur dans le navigateur et ses commandes d’édition. Pour une interface en lecture seule, utilisez { editor: { enabled: false } }. Une application collaborative peut ajouter @univerjs-pro/pdfs-editor avec les plugins de collaboration dont il dépend.

Mode prédéfini

Univer PDFs ne fournit actuellement aucun package de preset. Créez les applications PDF en mode plugin.

Contrôles d’édition et d’affichage

Accueil propose copier, couper, coller, le mode d’outil et les annotations. Insertion propose pages, zones de texte, paragraphes, listes, tableaux, images et séparateurs. Affichage propose zoom, plein écran, visibilité des annotations et défilement continu. Sélectionner un texte ou tableau ouvre ses contrôles contextuels, notamment l’inspecteur et les styles de tableau. Conservez le réglage par défaut editor.enabled: true de UniverPdfsUIPlugin pour ces contrôles du ruban.

Ordre des menus et disposition en grille

Configurez menu et ribbonType lors de l’enregistrement existant de UniverUIPlugin. Ces options appartiennent à l’interface commune, pas à UniverPdfsUIPlugin. L’exemple utilise les identifiants réels des menus de PDFs :

Configuration initiale

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 trie par ordre croissant les onglets, groupes ou éléments de même niveau, sans déplacer un élément vers un autre groupe. L’identifiant d’un élément est disponible dans son attribut data-u-command ; il ne correspond pas nécessairement à l’identifiant de la commande.

Mise à jour à l’exécution

Importez @univerjs/ui/facade avant de créer univerAPI avec FUniver.newAPI(univer). updateMenuConfig() fusionne les modifications, conserve les champs non spécifiés et actualise les menus. Les menus enregistrés plus tard reçoivent également ces réglages.

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

gridLayout ne concerne que le Ribbon en grille. Chaque groupe comporte deux lignes ; row et column commencent à 1. Les coordonnées explicites déterminent la position : pour échanger des cellules occupées, modifiez les deux éléments, pas seulement order. Les champs facultatifs omis conservent la configuration ou le Schema existant. Voir IRibbonGridLayout pour les étendues, libellés, largeurs et tailles d’icônes.

Gardez l’édition activée dans UniverPdfsUIPlugin : editor.enabled: false empêche l’enregistrement du Ribbon du produit. Les réglages de menu ne créent pas les boutons non enregistrés.

Les boutons personnalisés et les entrées de sous-menu acceptent aussi order et gridLayout dans createMenu() et createSubmenu(), puis sont enregistrés avec appendTo(). Le contenu du menu contextuel n’utilise pas la grille du Ribbon.

Que pensez-vous de ce guide ?

© 2026 DreamNum Co., Ltd.