spire.officejs-angular

An Angular component library for integrating Spire.OfficeJS editors into your Angular applications.

Installation

npm install spire.officejs-angular

Usage

Using with Template Reference

import { Component, AfterViewInit, OnInit, ViewChild, isDevMode } from '@angular/core';
import { SpireOfficejsEditorComponent } from 'spire.officejs-angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SpireOfficejsEditorComponent],
  template: `
    <div>
      <button (click)="openEditor()">Open Editor</button>
      <spire-officejs-editor
        #editorRef
        [config]="config"
        [serverUrl]="serverUrl"
      ></spire-officejs-editor>
    </div>
  `
})
export class OfficeJS implements AfterViewInit, OnInit {
  constructor (private router: Router) {}

  file = new File() // The actual File Data of the document
  fileUint8Data = new Uint8Array() // The actual Uint8Array data of the document
  serverUrl = window.location.origin
  Editor: any
  config: any = {}
  Api: any

  editorTypes = {
    document: 'document',
    pdf: 'pdf',
    spreadsheet: 'spreadsheet',
    presentation: 'presentation'
  }
  exts_document = ['docx', 'docm', 'doc', 'dotx', 'dotm', 'dot', 'odt', 'fodt', 'ott', 'txt', 'wps', 'wpt']
  exts_spreadsheet = ['xlsx', 'csv', 'xlsm', 'xls', 'xltx', 'xltm', 'xlt', 'et', 'ett']
  exts_presentation = ['pptx', 'pptm', 'ppt', 'ppsx', 'ppsm', 'pps', 'potx', 'potm', 'dps', 'dpt']
  exts_pdf= ['pdf', 'xps']


  @ViewChild('editorRef') editorRef?: SpireOfficejsEditorComponent

  ngOnInit () {
    this.init()
  }

  ngAfterViewInit () {
    this.openEditor()
  }
  init () {
    if (!this.file) {
      this.router.navigate([''])
      return
    }
    this.initConfig()
  }
  initConfig () {
    var url = new URL(import.meta.url)
    var editorType = ''
    var ext = this.getFileExtension()
    if (isDevMode()) {
      this.serverUrl = `http://127.0.0.1:7000`
    } else {
      this.serverUrl = `${url.origin}/spire.officejs`
      this.serverUrl = `${url.origin}/spire.officejs`
    }
    if (this.exts_document.includes(ext)) editorType = this.editorTypes.document
    else if (this.exts_spreadsheet.includes(ext))
      editorType = this.editorTypes.spreadsheet
    else if (this.exts_presentation.includes(ext))
      editorType = this.editorTypes.presentation
    else if (this.exts_pdf.includes(ext)) editorType = this.editorTypes.pdf

    this.config = {
      fileAttrs: {
        fileInfo: {
          name: this.file.name,
          ext: ext,
          primary: String(new Date().getTime()), //this is key
          creator: 'Jonn',
          createTime: '2022-04-18 11:30:43'
        },
        sourceUrl: this.serverUrl + '/files/__ffff_192.168.2.134/' + this.file.name,
        createUrl: this.serverUrl + '/open',
        mergeFolderUrl: '',
        fileChoiceUrl: '',
        templates: {}
      },
      user: {
        id: 'uid-1',
        name: 'Jonn',
        canSave: true
      },
      editorAttrs: {
        editorMode: this.file.name.endsWith('.pdf') ? 'view' : 'edit',
        editorWidth: '100%',
        editorHeight: '100%',
        editorType: editorType,
        platform: 'desktop', //desktop£¬ mobile£¬ embedded
        viewLanguage: 'zh', //en/zh
        isReadOnly: false,
        canChat: true,
        canComment: true,
        canReview: true,
        canDownload: true,
        canEdit: this.file.name.endsWith('.pdf') ? false : true,
        canForcesave: true,
        embedded: {
          saveUrl: '',
          embedUrl: '',
          shareUrl: '',
          toolbarDocked: 'top'
        },
        useWebAssemblyDoc: true,
        useWebAssemblyExcel: true,
        useWebAssemblyPpt: true,
        useWebAssemblyPdf: true,
        spireDocJsLicense: '',
        spireXlsJsLicense: '',
        spirePresentationJsLicense: '',
        spirePdfJsLicense: '',
        serverless: {
          useServerless: true,
          baseUrl: this.serverUrl,
          fileData: this.fileUint8Data
        },
        events: {
          onSave: this.onFileSave
        },
        plugins: {
          pluginsData: []
        }
      }
    }
  }
  OnWindowReSize () {
    let wrapEl = document.getElementsByClassName('form') as any
    if (wrapEl.length) {
      wrapEl[0].style.height = screen.availHeight + 'px'
      window.scrollTo(0, -1)
      wrapEl[0].style.height = window.innerHeight + 'px'
    }
  }
  getFileExtension () {
    const filename = this.file.name.split(/[\\/]/).pop() as string
    return filename.substring(filename.lastIndexOf('.') + 1).toLowerCase() || ''
  }
  onFileSave (data: any) {
    console.log('save data', data)
  }
  openEditor () {
    if(this.editorRef?.open)
      this.editorRef.open()
  }
}

Using in NgModule-based Applications

If you're using NgModule-based Angular applications:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SpireOfficejsEditorModule } from 'spire.officejs-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    SpireOfficejsEditorModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Parameters

Input Properties

| Property | Description | Type | Default | |----------|-------------|------|---------| | id | Editor container ID | string | 'SpireofficejsEditor' | | config | Editor configuration object | object | Required | | serverUrl | Server URL for Spire.OfficeJS | string | Required |

Methods

| Method | Description | |--------|-------------| | open() | Manually initialize and open the editor |

Config Structure

The config object should contain:

{
  fileAttrs: {
    fileInfo: {
      name: string,
      ext: string,
      primary: string,
      creator: string,
      createTime: string
    },
    sourceUrl: string,
    createUrl?: string,
    mergeFolderUrl?: string,
    fileChoiceUrl?: string,
    templates?: object
  },
  user: {
    id: string,
    name: string,
    canSave: boolean
  },
  editorAttrs: {
    editorMode: 'edit' | 'view',
    editorWidth: string,
    editorHeight: string,
    editorType: 'document' | 'spreadsheet' | 'presentation' | 'pdf',
    platform: 'desktop' | 'mobile',
    viewLanguage: string,
    isReadOnly: boolean,
    canChat: boolean,
    canComment: boolean,
    canReview: boolean,
    canDownload: boolean,
    canEdit: boolean,
    canForcesave: boolean,
    embedded?: {
      saveUrl: string,
      embedUrl: string,
      shareUrl: string,
      toolbarDocked: string
    },
    useWebAssemblyDoc: boolean,
    useWebAssemblyExcel: boolean,
    useWebAssemblyPpt: boolean,
    useWebAssemblyPdf: boolean,
    spireDocJsLicense: string,
    spireXlsJsLicense: string,
    spirePresentationJsLicense: string,
    spirePdfJsLicense: string,
    serverless?: {
      useServerless: boolean,
      baseUrl: string,
      fileData: Uint8Array
    },
    events: {
      onSave: (data: any) => void
    },
    plugins: {
      pluginsData: any[]
    }
  }
}

Important Notes

1. Using this component requires the vite plugin to build a standalone server. You can refer to Using the Official Migration Schematic or configure it yourself.
2. Make sure your server is running and accessible from the client application.
3. The component will automatically load the necessary editor scripts from the provided serverUrl.
4. For production use, ensure proper error handling and loading states.
5. This component is built as a standalone Angular component and supports both standalone and NgModule-based applications.

Supported File Formats

Document

.docx, .docm, .doc, .dotx, .dotm, .dot, .odt, .fodt, .ott, .txt, .wps, .wpt

Spreadsheet

.xlsx, .csv, .xlsm, .xls, .xltx, .xltm, .xlt, .et, .ett

Presentation

.pptx, .pptm, .ppt, .ppsx, .ppsm, .pps, .potx, .potm, .dps, .dpt

PDF

.pdf, .xps

Build Tool Plugins

| Build Tool | Plugin Name | NPM Package | |------------|-------------|-------------| | Vite | vite-plugin-spire.officejs | vite-plugin-spire.officejs |

Using the Official Migration Schematic

1. In your Angular project root directory, run the following command:

npm i @analogjs/platform @nx/devkit

npx ng generate @analogjs/platform:migrate --project [your-project-name]

If you're unsure about the project name, you can check the projects field in the angular.json file.

2. Execute the automatic migration This Schematic will automatically complete the following tasks:

• Install the necessary dependency packages.
• Create the vite.config.ts configuration file in the project root directory.
• Update angular.json, replacing the original build and serve builders with the Vite builders provided by Analog.
• Modify entry files such as src/main.ts to adapt to Vite's workflow.