Web SDK

Installation et utilisation de base

Univer PDFs est un produit Univer Office SDK et ne propose actuellement aucun préréglage. Créez les applications PDF en mode plugin.

Univer propose deux modes d’intégration : le mode prédéfini et le mode plugin. Le mode prédéfini simplifie la configuration grâce à des ensembles de plugins préconfigurés. Pour une personnalisation ou des extensions approfondies, nous recommandons le mode plugin, qui permet de combiner et de configurer les plugins individuellement.

Configuration en mode plugin

Utilisation d’un gestionnaire de packages

Utilisez un outil de compilation compatible avec les modules ES et le champ exports de package.json.

Installation

Univer utilise React pour son interface et RxJS pour les flux de données ; il peut aussi être intégré à Vue ou Angular. Vérifiez que les peer dependencies1 react, react-dom et rxjs sont installées. La commande Yarn ci-dessous les inclut explicitement.

Conservez la même version pour tous les packages @univerjs/* et @univerjs-pro/*.

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

Conservez tous les packages @univerjs/* et @univerjs-pro/* à la même version.

Utilisation

Créez le conteneur avant d’initialiser Univer et définissez une hauteur explicite :

HTML
<div id="app" style="height: 600px"></div>

Importez les entrées facade utilisées ci-dessous avant d’appeler FUniver.newAPI(univer). Importez les CSS dans cet ordre : @univerjs/design, @univerjs/ui, puis ceux du produit.

  1. Importez les styles de l'interface partagée avant celui de l'interface PDF, puis fusionnez les packs de locales activés par votre application :

    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/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs-pro/pdfs-ui/lib/index.css'

  2. Importez le point d'entrée de la façade PDF. Cet import à effet de bord ajoute les méthodes et les énumérations PDF à FUniver :

    TypeScript
    import '@univerjs-pro/pdfs/facade'

  3. Créez l'environnement d'exécution, enregistrez explicitement l'ensemble des plugins, puis créez un PDF :

    TypeScript
    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)univerAPI.createPdf({ name: 'Untitled PDF' })

Méthodes univer.registerPlugin et univer.registerPlugins

La méthode univer.registerPlugin sert à enregistrer un plugin dans l’instance Univer. Vous pouvez l’appeler après avoir créé l’instance Univer afin d’y enregistrer des plugins.

Vous pouvez enregistrer un plugin avec la méthode univer.registerPlugin(Plugin, options), où Plugin désigne le plugin à enregistrer et options les paramètres de configuration facultatifs, qui peuvent varier d’un plugin à l’autre.

Vous pouvez également utiliser univer.registerPlugins pour passer un tableau et enregistrer plusieurs plugins en une seule fois. Cette possibilité est utile lorsque vous devez centraliser la gestion des plugins.

TypeScript
univer.registerPlugins([  [UniverUIPlugin, { container: 'app' }],  [UniverLicensePlugin, {    license: process.env.CLIENT_LICENSE_TEXT,  }],  UniverPdfsPlugin,  UniverPdfsUIPlugin,])

Prise en charge mobile

Le paquet @univerjs-pro/pdfs-ui n’exporte actuellement aucun plugin UI mobile dédié. N’utilisez pas d’import MobileUIPlugin ni d’option mobile: true inexistants. Un conteneur étroit ne prouve pas une prise en charge tactile complète : vérifiez l’UI existante sur les appareils ciblés.

Worker de miniatures facultatif

Les miniatures des pages peuvent être affichées sur le thread principal sans configuration supplémentaire. Pour les documents plus volumineux, fournissez un worker de module dédié avec thumbnailWorkerURL.

Créez un point d'entrée de worker tel que pdf-thumbnail.worker.ts :

TypeScript
import { startPdfPageThumbnailWorker } from '@univerjs-pro/pdfs-ui'startPdfPageThumbnailWorker()

Transmettez ensuite son URL lors de l'enregistrement du plugin d'interface PDF :

TypeScript
univer.registerPlugin(UniverPdfsUIPlugin, {  thumbnailWorkerURL: new Worker(new URL('./pdf-thumbnail.worker.ts', import.meta.url), { type: 'module' }),})

L'option accepte également une URL sous forme de chaîne ou un Worker existant. Si les workers ou OffscreenCanvas ne sont pas disponibles, l'affichage des miniatures revient au thread principal.

Édition collaborative

@univerjs-pro/pdfs-editor ne fait pas partie de la pile locale. Ne l’enregistrez pas seul : installez et enregistrez d’abord la pile complète @univerjs-pro/collaboration, @univerjs-pro/collaboration-client et @univerjs-pro/collaboration-client-ui comme décrit dans Collaboration, puis installez et enregistrez le plugin de cycle de vie de l’éditeur PDF.

Utilisation avec Node.js

Les services Node.js peuvent enregistrer uniquement UniverPdfsPlugin, sans les packages d’interface du navigateur. Ajoutez la pile de collaboration complète ci-dessus uniquement si le service doit charger ou synchroniser des unités PDF conservées.

Autres versions

Outre les versions stables, Univer propose des canaux alpha / beta et nightly. Ces versions vous donnent un accès anticipé aux fonctionnalités les plus récentes qui n’ont pas encore été publiées officiellement. Gardez toutefois à l’esprit que davantage de fonctionnalités implique aussi davantage de risques. Ces versions peuvent contenir des bugs, des fonctionnalités incomplètes ou instables. Évitez autant que possible de les utiliser dans des environnements de production.

Version alpha / beta

Lorsque l’équipe de développement d’Univer termine une nouvelle fonctionnalité ou une modification importante, elle peut la publier en avant-première sur le canal alpha ou beta. Vous pouvez installer la version alpha / beta d’un package Univer à l’aide de la commande suivante :

Shell
pnpm add @univerjs-pro/pdfs@alpha # Alpha version
pnpm add @univerjs-pro/pdfs@beta # Beta version

Si vous rencontrez un problème ou souhaitez faire part de vos commentaires lors de l’utilisation des versions alpha / beta, signalez-les à l’équipe de développement d’Univer via les issues GitHub.

Vos retours sur ces versions préliminaires sont les bienvenus.

Étapes suivantes

Footnotes

  1. Les peerDependencies sont des dépendances que l’application hôte doit fournir dans une version compatible. Elles permettent de partager des bibliothèques comme React avec Univer. ↩

Que pensez-vous de ce guide ?

© 2026 DreamNum Co., Ltd.