spire.officejs-vue

A Vue component library for integrating Spire.OfficeJS editors into your Vue applications.

Installation

# vue2
npm install vue-demi @vue/composition-api spire.officejs-vue

# vue3
npm install vue-dem spire.officejs-vue

Usage

<template>
  <SpireOfficejsEditor
    ref="editorRef"
    :config="config"
    :server-url="serverUrl"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import SpireOfficejsEditor from 'spire.officejs-vue'

// File data - replace with actual file data from user selection
const file = new File() // Should be replaced with actual file data
const fileUint8Data = new Uint8Array() // Should be replaced with actual Uint8Array data

const editorRef = ref(null)
const config = ref({})
const serverUrl = ref('')

const editorTypes = {
  document: 'document',
  pdf: 'pdf',
  spreadsheet: 'spreadsheet',
  presentation: 'presentation'
}

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

onMounted(() => {
  initConfig()
  // Open editor after configuration is ready
  if (editorRef.value?.open) {
    editorRef.value.open()
  }
})

function initConfig() {
  const url = new URL(import.meta.url)
  let editorType = ''
  const ext = getFileExtension()
  
  let originUrl = ''
  if (import.meta.env.DEV) {
    serverUrl.value = 'http://127.0.0.1:7000'
    originUrl = 'http://127.0.0.1:7000'
  } else if (import.meta.env.PROD) {
    serverUrl.value = `${url.origin}/spire.officejs`
    originUrl = `${url.origin}/spire.officejs`
  }

  if (exts_document.includes(ext)) editorType = editorTypes.document
  else if (exts_spreadsheet.includes(ext)) editorType = editorTypes.spreadsheet
  else if (exts_presentation.includes(ext)) editorType = editorTypes.presentation
  else if (exts_pdf.includes(ext)) editorType = editorTypes.pdf

  config.value = {
    fileAttrs: {
      fileInfo: {
        name: file.name,
        ext: ext,
        primary: String(new Date().getTime()), // Unique identifier
        creator: 'Jonn',
        createTime: '2022-04-18 11:30:43'
      },
      sourceUrl: originUrl + '/files/__ffff_192.168.2.134/' + file.name,
      createUrl: originUrl + '/open',
      mergeFolderUrl: '',
      fileChoiceUrl: '',
      templates: {}
    },
    user: {
      id: 'uid-1',
      name: 'Jonn',
      canSave: true
    },
    editorAttrs: {
      editorMode: file.name.endsWith('.pdf') ? 'view' : 'edit',
      editorWidth: '100%',
      editorHeight: '100%',
      editorType: editorType,
      platform: 'desktop', // 'desktop', 'mobile', 'embedded'
      viewLanguage: 'zh', // 'en' or 'zh'
      isReadOnly: false,
      canChat: true,
      canComment: true,
      canReview: true,
      canDownload: true,
      canEdit: 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: originUrl,
        fileData: fileUint8Data
      },
      events: {
        onSave: onFileSave
      },
      plugins: {
        pluginsData: []
      }
    }
  }
}

function getFileExtension() {
  const filename = file.name.split(/[\\/]/).pop()
  return filename.substring(filename.lastIndexOf('.') + 1).toLowerCase() || ''
}

function onFileSave(data) {
  // Custom save logic
  console.log('save data', data)
}
</script>

Parameters

Props

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

Methods

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

Important Notes

1. This component requires the spire.officejs package to be installed and configured on your server.
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.

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 |