Integrar en Web Component

Consulta primero la instalación y el uso básico. Este ejemplo usa Web Component para montar Univer Pdfs en un contenedor con una altura explícita.

Pasos de integración

  1. Inicializa Univer en connectedCallback.
  2. Libera Univer en disconnectedCallback.

Código de ejemplo

TypeScript
import { UniverLicensePlugin } from '@univerjs-pro/license'import { UniverPdfsPlugin } from '@univerjs-pro/pdfs'import { UniverPdfsUIPlugin } from '@univerjs-pro/pdfs-ui'import PdfsUIesES from '@univerjs-pro/pdfs-ui/locale/es-ES'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { FUniver } from '@univerjs/core/facade'import DesignesES from '@univerjs/design/locale/es-ES'import { UniverUIPlugin } from '@univerjs/ui'import UIesES from '@univerjs/ui/locale/es-ES'import '@univerjs/design/lib/index.css'import '@univerjs/ui/lib/index.css'import '@univerjs-pro/pdfs-ui/lib/index.css'import '@univerjs-pro/pdfs/facade'class UniverEditorElement extends HTMLElement {  private univer?: Univer  connectedCallback() {    const container = this    const univer = new Univer({      locale: LocaleType.ES_ES,      locales: {        [LocaleType.ES_ES]: mergeLocales(          DesignesES,          UIesES,          PdfsUIesES,        ),      },    })    univer.registerPlugin(UniverLicensePlugin, {      license: 'your license.txt',    })    univer.registerPlugin(UniverUIPlugin, { container })    univer.registerPlugin(UniverPdfsPlugin)    univer.registerPlugin(UniverPdfsUIPlugin)    const univerAPI = FUniver.newAPI(univer)    univerAPI.createPdf({ name: 'Untitled PDF' })    this.univer = univer  }  disconnectedCallback() {    this.univer?.dispose()    this.univer = undefined  }}customElements.define('univer-pdfs-editor', UniverEditorElement)
HTML
<univer-pdfs-editor style="display: block; height: 600px"></univer-pdfs-editor>

¿Cómo es esta guía?

© 2026 DreamNum Co., Ltd.