spire.officejs-react

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

Installation

npm install spire.officejs-react

Usage

import React, { useRef, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'
import OfficejsEditor from 'spire.officejs-react';

function App() {
  const file = new File() // The actual File Data of the document
  const fileUint8Data = new Uint8Array() // The actual Uint8Array data of the document
  const navigate = useNavigate()
  const EditorRef = React.useRef()
  const config = useRef({})
  const serverUrl = useRef('')
  let Editor = useRef(null)
  let Api = useRef(null)
  let originUrl = window.location.origin
  let env = ''
  const [isEditorReady, setIsEditorReady] = useState(false)
  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']

  useEffect(() => {
    if (!file) {
      navigate('/')
      return
    }
    init()
  }, [])

  useEffect(() => {
    if (config.current && config.current.fileAttrs && EditorRef.current) {
      const timer = setTimeout(() => {
        setIsEditorReady(true)
      }, 100)
      return () => clearTimeout(timer)
    }
  }, [config.current, EditorRef.current])

  useEffect(() => {
    if (isEditorReady && EditorRef.current && EditorRef.current.open) {
      EditorRef.current.open()
    }
  }, [isEditorReady])

  const init = () => {
    initConfig()
  }
  const initConfig = () => {
    var url = new URL(import.meta.url)
    var editorType = ''
    var ext = getFileExtension()
    if (import.meta.env.DEV) {
      serverUrl.current = `http://127.0.0.1:7040`
      originUrl = `http://127.0.0.1:7040`
      env = 'develop'
    } else if (import.meta.env.PROD) {
      serverUrl.current = `${url.origin}/spire.officejs`
      originUrl = `${url.origin}/spire.officejs`
      env = 'product'
    }

    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.current = {
      fileAttrs: {
        fileInfo: {
          name: file.name,
          ext: ext,
          primary: String(new Date().getTime()), //this is key
          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/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: []
        }
      }
    }
  }
  const getFileExtension = () => {
    const filename = file.name.split(/[\\/]/).pop()
    return filename.substring(filename.lastIndexOf('.') + 1).toLowerCase() || ''
  }
  const onFileSave = data => {
    console.log('save data', data)
  }

  return (
    <>
      <SpireOfficejsEditor
        ref={EditorRef}
        config={config.current}
        serverUrl={serverUrl.current}
      ></SpireOfficejsEditor>
    </>
  )
}

Parameters

Props

| 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 |

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 |