Integrar en Vue

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

Pasos de integración

  1. Inicializa Univer en onMounted.
  2. Libera Univer en onBeforeUnmount.

Código de ejemplo

Vue
<script setup lang="ts">import { onBeforeUnmount, onMounted, ref } from 'vue'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'const containerRef = ref<HTMLDivElement | null>(null)let univerInstance: Univer | undefinedonMounted(() => {  const container = containerRef.value  if (!container) return  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' })  univerInstance = univer})onBeforeUnmount(() => univerInstance?.dispose())</script><template>  <div ref="containerRef" style="height: 600px" /></template>

¿Cómo es esta guía?

© 2026 DreamNum Co., Ltd.