# UI Descripción general

> Configura el lienzo PDF, los controles de edición, la configuración regional y el worker de miniaturas.

- Human documentation: [https://docs.univer.ai/es-ES/guides/pdfs/ui/overview](https://docs.univer.ai/es-ES/guides/pdfs/ui/overview)

- Agent Markdown: [https://docs.univer.ai/es-ES/guides/pdfs/ui/overview.md](https://docs.univer.ai/es-ES/guides/pdfs/ui/overview.md)

- Requested language: `es-ES`

- Content language: `es-ES`

- Documentation version: `1.2.0`

- Source: [pdfs/ui/overview.es-ES.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/pdfs/ui/overview.es-ES.mdx)

---

`@univerjs-pro/pdfs-ui` monta las unidades PDF en el área de trabajo estándar de Univer y se licencia mediante Univer Office SDK.

## Responsabilidades de los paquetes

| Paquete                     | Responsabilidad                                                                                                                         |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `@univerjs-pro/pdfs`        | Registra la unidad `UNIVER_PDF`, el modelo de documento y los comandos PDF persistentes.                                                |
| `@univerjs-pro/pdfs-ui`     | Monta el lienzo del navegador, la barra de miniaturas y el pie. Sus controles de edición local están activados de forma predeterminada. |
| `@univerjs-pro/pdfs-editor` | Declara las dependencias del editor colaborativo. No monta la interfaz PDF ni controla `editor.enabled`.                                |

`UniverPdfsUIPlugin` depende de `UniverLicensePlugin` y `UniverPdfsPlugin`. Completa primero la configuración de PDF con licencia y después registra el plugin de interfaz.

## Registrar el plugin de interfaz

```ts
import { UniverPdfsUIPlugin } from '@univerjs-pro/pdfs-ui'
import PdfsUIEsES from '@univerjs-pro/pdfs-ui/locale/es-ES'

import '@univerjs-pro/pdfs-ui/lib/index.css'

univer.registerPlugin(UniverPdfsUIPlugin)
```

Combina `PdfsUIEsES` con las configuraciones regionales que pasas a `new Univer(...)`. Este paquete traduce la cinta, el inspector, los menús contextuales y la barra de páginas específicos de PDF.

## Modos de visor y editor

El plugin siempre monta la barra de miniaturas, el lienzo PDF y el pie. La edición está activada de forma predeterminada y registra además la cinta, los menús contextuales, el inspector, el portapapeles, los comandos de inserción y las acciones y controladores de edición.

Usa el modo de solo lectura cuando la aplicación no deba mostrar esos controles:

```ts
univer.registerPlugin(UniverPdfsUIPlugin, {
  editor: { enabled: false },
})
```

Esta opción cambia la interfaz montada y los controladores y servicios específicos de edición. No es una política de autorización ni modifica una instantánea PDF guardada.

## Worker de miniaturas

`thumbnailWorkerURL` acepta una cadena, un `URL` o un `Worker` existente. El módulo indicado debe iniciar el runtime exportado:

```ts title="pdf-thumbnail-worker.ts"
import { startPdfPageThumbnailWorker } from '@univerjs-pro/pdfs-ui'

startPdfPageThumbnailWorker()
```

```ts
univer.registerPlugin(UniverPdfsUIPlugin, {
  thumbnailWorkerURL: new URL('./pdf-thumbnail-worker.js', import.meta.url),
})
```

El worker debe ejecutarse en un ámbito Worker dedicado. Si no se configura, faltan las API necesarias del navegador o una página requiere un recurso exclusivo del hilo principal, las miniaturas se renderizan en el hilo principal.

## Límite de la API pública

La interfaz invoca comandos y servicios PDF internamente. Un botón de la cinta no implica un método público equivalente. Consulta la [guía de la Facade PDF](https://docs.univer.ai/es-ES/guides/pdfs/getting-started/facade.md) para la edición programática compatible, [Importación y exportación](https://docs.univer.ai/es-ES/guides/pdfs/features/import-export.md) para la conversión y [Imprimir](https://docs.univer.ai/es-ES/guides/pdfs/features/print.md) para imprimir desde el navegador.

## Orden de menús y disposición en cuadrícula

Utiliza [`order`, `gridLayout` y `updateMenuConfig()`](https://docs.univer.ai/es-ES/guides/pdfs/features/core.md#menu-order-and-grid-layout) para configurar el orden de pestañas, grupos y elementos, la posición en la cuadrícula y las actualizaciones en ejecución. La guía también enlaza las opciones Facade para menús personalizados.