# Instalación y uso básico

- Human documentation: [https://docs.univer.ai/es-ES/guides/pdfs/getting-started/installation](https://docs.univer.ai/es-ES/guides/pdfs/getting-started/installation)

- Agent Markdown: [https://docs.univer.ai/es-ES/guides/pdfs/getting-started/installation.md](https://docs.univer.ai/es-ES/guides/pdfs/getting-started/installation.md)

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

- Source: [pdfs/getting-started/installation/index.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/pdfs/getting-started/installation/index.es-ES.mdx)

---

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 dependencies[^peer-dependency] `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**.

#### pnpm

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

#### npm

```shell
npm install @univerjs/core @univerjs/design @univerjs/ui @univerjs-pro/license @univerjs-pro/pdfs @univerjs-pro/pdfs-ui
```

#### yarn

```shell
yarn add @univerjs/core @univerjs/design @univerjs/ui @univerjs-pro/license @univerjs-pro/pdfs @univerjs-pro/pdfs-ui react react-dom rxjs
```

#### bun

```shell
bun 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:
   
   ```ts
   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'
   ```

1.
   Importe la entrada Facade[^facade-entry] de PDF. Esta importación por efecto secundario añade métodos y enumeraciones de PDF a `FUniver`:
   
   ```ts
   import '@univerjs-pro/pdfs/facade'
   ```

1.
   Cree el entorno de ejecución, registre la pila explícita de plugins y cree un PDF:
   
   ```ts
   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`:

```ts
import { startPdfPageThumbnailWorker } from '@univerjs-pro/pdfs-ui'

startPdfPageThumbnailWorker()
```

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

```ts
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](https://docs.univer.ai/es-ES/guides/pdfs/features/collaboration.md), 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:

#### npm

```bash
npm install @univerjs-pro/pdfs@alpha # Alpha version
npm install @univerjs-pro/pdfs@beta # Beta version
```

#### pnpm

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

#### yarn

```bash
yarn add @univerjs-pro/pdfs@alpha # Alpha version
yarn add @univerjs-pro/pdfs@beta # Beta version
```

#### bun

```bash
bun add @univerjs-pro/pdfs@alpha # Alpha version
bun 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](https://github.com/dream-num/univer/issues).

Agradecemos sus comentarios sobre estas primeras versiones.

## Próximos pasos

* [Inicio rápido](https://docs.univer.ai/es-ES/guides/pdfs/getting-started/quickstart.md)
* [Facade API](https://docs.univer.ai/es-ES/guides/pdfs/getting-started/facade.md)
* [Configuración de la licencia](https://docs.univer.ai/es-ES/server/license.md)
* [Integración de Server SDK](https://docs.univer.ai/es-ES/server.md)

[^peer-dependency]: Las `peerDependencies` son dependencias que la aplicación anfitriona debe proporcionar con versiones compatibles. Permiten compartir bibliotecas como React con Univer.

[^facade-entry]: 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.