Intégrer dans Angular

Consultez d’abord l’installation et les premiers pas. Cet exemple utilise Angular pour monter Univer Pdfs dans un conteneur avec une hauteur explicite.

Étapes d’intégration

  1. Initialisez Univer dans ngAfterViewInit.
  2. Libérez Univer dans ngOnDestroy.

Exemple de code

TypeScript
import type { AfterViewInit, ElementRef, OnDestroy } from '@angular/core'import { Component, ViewChild } from '@angular/core'import { UniverLicensePlugin } from '@univerjs-pro/license'import { UniverPdfsPlugin } from '@univerjs-pro/pdfs'import { UniverPdfsUIPlugin } from '@univerjs-pro/pdfs-ui'import PdfsUIfrFR from '@univerjs-pro/pdfs-ui/locale/fr-FR'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { FUniver } from '@univerjs/core/facade'import DesignfrFR from '@univerjs/design/locale/fr-FR'import { UniverUIPlugin } from '@univerjs/ui'import UIfrFR from '@univerjs/ui/locale/fr-FR'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'@Component({  selector: 'app-univer',  standalone: true,  template: '<div #container style="height: 600px"></div>',})export class UniverComponent implements AfterViewInit, OnDestroy {  @ViewChild('container') containerRef!: ElementRef<HTMLDivElement>  private univer?: Univer  ngAfterViewInit() {    const container = this.containerRef.nativeElement    const univer = new Univer({      locale: LocaleType.FR_FR,      locales: {        [LocaleType.FR_FR]: mergeLocales(          DesignfrFR,          UIfrFR,          PdfsUIfrFR,        ),      },    })    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  }  ngOnDestroy() {    this.univer?.dispose()  }}

Que pensez-vous de ce guide ?

© 2026 DreamNum Co., Ltd.