Web SDK

Instalación y uso básico

Univer PDFs es un producto de Univer Office SDK y actualmente no proporciona un preset. Cree aplicaciones PDF en modo de plugins.

Univer ofrece dos modos de integración: el modo preestablecido y el modo plugin. El modo preestablecido simplifica la configuración mediante conjuntos de plugins preconfigurados. Si necesita personalizaciones o extensiones avanzadas, recomendamos el modo plugin para combinar y configurar los plugins de forma individual.

Configuración a través del modo complemento

Uso del Administrador de paquetes

Utiliza una herramienta de compilación compatible con ES Modules y el campo exports de package.json.

Instalación

Univer utiliza React para la interfaz y RxJS para los flujos de datos; también puede integrarse en Vue o Angular. Comprueba que las peer dependencies1 react, react-dom y rxjs estén instaladas. El comando de Yarn siguiente las incluye explícitamente.

Mantén todos los paquetes @univerjs/* y @univerjs-pro/* en la misma versión.

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

Mantenga todos los paquetes @univerjs/* y @univerjs-pro/* en la misma versión.

Uso

Crea el contenedor antes de inicializar Univer y asígnale una altura explícita:

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

Importa las entradas facade utilizadas a continuación antes de llamar a FUniver.newAPI(univer). Importa el CSS en este orden: @univerjs/design, @univerjs/ui y, por último, el CSS del producto.

  1. Importe los estilos de la interfaz compartida antes del estilo de la interfaz PDF y combine los paquetes de configuración regional habilitados por su aplicación:

    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. Importe la entrada Facade2 de PDF. Esta importación por efecto secundario añade métodos y enumeraciones de PDF a FUniver:

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

  3. Cree el entorno de ejecución, registre la pila explícita de plugins y cree 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étodos univer.registerPlugin y univer.registerPlugins

El método univer.registerPlugin se utiliza para registrar un complemento en la instancia de Univer. Puede llamar a este método después de crear la instancia de Univer para registrar complementos.

Puede registrar un complemento utilizando el método univer.registerPlugin(Plugin, options), donde Plugin es el complemento que se registrará y options son elementos de configuración opcionales, ya que cada complemento puede tener diferentes elementos de configuración.

También puede usar univer.registerPlugins para pasar una matriz y registrar varios complementos a la vez. Esto es útil para escenarios en los que necesita administrar complementos de forma centralizada.

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

Compatibilidad móvil

Actualmente, @univerjs-pro/pdfs-ui no exporta un plugin de UI móvil dedicado. No utilice importaciones MobileUIPlugin ni opciones mobile: true inexistentes. Un contenedor estrecho no garantiza compatibilidad táctil completa; evalúe la UI existente en los dispositivos de destino.

Worker de miniaturas opcional

Las miniaturas de página pueden renderizarse en el hilo principal sin configuración adicional. Para documentos más grandes, proporcione un worker de módulo dedicado mediante thumbnailWorkerURL.

Cree una entrada de worker como pdf-thumbnail.worker.ts:

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

A continuación, pase su URL al registrar el plugin de interfaz PDF:

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

La opción también acepta una URL como cadena o un Worker existente. Si los workers u OffscreenCanvas no están disponibles, el renderizado de miniaturas vuelve al hilo principal.

Edición colaborativa

@univerjs-pro/pdfs-editor no forma parte de la pila local. No lo registres por sí solo: primero instala y registra la pila completa de @univerjs-pro/collaboration, @univerjs-pro/collaboration-client y @univerjs-pro/collaboration-client-ui como se describe en Colaboración, y después instala y registra el plugin del ciclo de vida del editor PDF.

Uso con Node.js

Los servicios de Node.js pueden registrar únicamente UniverPdfsPlugin, sin paquetes de interfaz para el navegador. Añade la pila completa de colaboración descrita arriba solo cuando el servicio necesite cargar o sincronizar unidades PDF persistentes.

Otras versiones

Además de las versiones estables, Univer ofrece canales alfa/beta y nocturnos. Estas versiones le permiten obtener acceso anticipado a las funciones más nuevas que aún no se han lanzado oficialmente. Sin embargo, tenga en cuenta que más funciones también significan más riesgos. Estas versiones pueden contener errores, funciones incompletas o características inestables. Evite el uso de estas versiones en entornos de producción siempre que sea posible.

Lanzamiento alfa/beta

Cuando el equipo de desarrollo de Univer completa una nueva función o un cambio significativo, es posible que lo publique previamente en el canal alfa o beta. Puede instalar la versión alfa/beta de un paquete de Univer usando el siguiente comando:

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

Si encuentra algún problema o tiene algún comentario mientras usa las versiones alfa/beta, infórmelo al equipo de desarrollo de Univer a través de Problemas de GitHub.

Agradecemos sus comentarios sobre estas primeras versiones.

Próximos pasos

Footnotes

  1. Las peerDependencies son dependencias que la aplicación anfitriona debe proporcionar con versiones compatibles. Permiten compartir bibliotecas como React con Univer. ↩

  2. Facade es la API de aplicación de los plugins registrados. Importar una entrada de Facade añade métodos a la API, pero no registra el plugin de la función. ↩

¿Cómo es esta guía?

© 2026 DreamNum Co., Ltd.