With the rapid advancement of enterprise digital transformation, front-end document processing has emerged as a core requirement for modern web applications. As a robust enterprise-level framework, Angular is extensively adopted in complex scenarios—including OA systems, document platforms, and education management systems—thanks to its strong typing, component-based architecture, and efficient state management.

This article demonstrates how to integrate Spire.OfficeJS into an Angular application to implement core functions such as local file uploads, online document editing, format conversion, and file downloads.

Content Overview

• What is Spire.OfficeJS
• Prerequisites & Angular Project Setup
• Integrating Spire.OfficeJS Online Document Editor
• Launch & Function Validation
• Frequently Asked Questions
• Apply for a Temporary License

What is Spire.OfficeJS

Spire.OfficeJS is an enterprise-level online document editing solution comprising four core modules: Spire.WordJS, Spire.ExcelJS, Spire.PresentationJS, and Spire.PDFJS. It enables browser-based preview, editing, annotation, and format conversion for Word, Excel, PPT, and PDF files—all without requiring local Office software or any other plug‑ins. Additionally, it delivers essential enterprise capabilities including cloud‑native architecture, cross‑platform compatibility, and high‑level security.

Key Features:

• Modular Design: Each of the four core modules handles a distinct document type, enabling granular Word editing, Excel data calculation and charting, visual PowerPoint design, and rapid PDF preview—together covering the full spectrum of document processing.
• Pure Front-End Rendering: Powered by a custom WebAssembly engine, it eliminates back-end document processing, reducing server load and boosting response speeds.
• Multi-Format Compatibility: Supports mainstream file formats such as DOCX, XLSX, PPTX, PDF, WPS, and cross-format export (e.g., Word to PDF).
• Enterprise-Grade Security: Supports encrypted storage of static files to protect sensitive document data.
• Easy to Integrate: Seamlessly compatible with mainstream front-end frameworks (Angular, Vue, React) and enables rapid integration via minimal configuration.

Prerequisites & Angular Project Setup

Ensure your development environment meets the following requirements before integration:

1. Install Node.js and npm

• Download: Visit the official Node.js download page and install the appropriate version for your OS.
• Verify Installation: Run the following commands in CMD to confirm success (version numbers will appear if installed correctly):

node -v
npm -v

2. Install Angular CLI

Angular CLI streamlines project creation and management. Install it globally via npm:

npm install -g @angular/cli

• After installation, run the following command to check the Angular CLI version and confirm successful installation:

ng version

3. Initialize an Angular Project

• Open the CMD and navigate to the target directory (example: F:\angular).
• Create a new Angular project with the following command (skip Git initialization for simplicity):

ng new spireOfficeJS --skip-git

• Configure the project wizard as follows (for compatibility):
  • Would you like to create a "zoneless" app without zone.js? No
  • Stylesheet format: CSS
  • Would you like to enable SSR/SSG? No

• Wait for dependencies to finish installing. After the project is successfully created, the directory structure will appear as shown:

4. Validate Project Initialization

Open the project with VS Code, and run the following command in the terminal to start the development server:

npm run start

Visit http://localhost:4200/ in your browser. If the Angular default welcome page (with "Hello, spireOfficeJS") appears, initialization is successful.

Integrating Spire.OfficeJS Online Document Editor

1. Deploy Spire.OfficeJS Static Resources

• Download the Spire.OfficeJS product package and extract it.
• Create a spire.cloud folder in the project's public directory (path: public/spire.cloud).
• Copy the entire web folder from the extracted Spire.OfficeJS product package to the public/spire.cloud/ directory.
• Confirm the core script SpireCloudEditor.js is located at: public/spire.cloud/web/editors/spireapi/SpireCloudEditor.js

Note: This path must be completely consistent with the path in the subsequent configured office-js.ts, otherwise the editor cannot be loaded.

2. Configure State Management

We use NgRx Signals to synchronize file upload data (file object + binary data) for access by the editor component.

(1) Install dependencies

Run the following installation command in the VS Code terminal:

npm install @ngrx/effects @ngrx/signals @ngrx/store

(2) Create state management store

• Create a store folder in the src/app/ directory and create a new index.ts file.
• Add the following code to index.ts to define file state and operations:

import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';

// Define file state interface
interface FileState {
  file: File | null;          // Uploaded file object
  fileUint8Data: Uint8Array | null; // File binary data
}

// Initial state
const initialState: FileState = {
  file: null,
  fileUint8Data: null,
};

// Create global Store
export const fileStore = signalStore(
  { providedIn: 'root' },
  withState(initialState),
  withMethods((store) => ({
    // Update file object
    setFileData(data: File | null): void {
      patchState(store, { file: data });
    },
    // Update file binary data
    setFileUint8Data(uint8Data: Uint8Array | null): void {
      patchState(store, { fileUint8Data: uint8Data });
    }
  }))
);

3. Develop Core Components (Upload + Editor)

(1) Create components

Run the following commands in your terminal to create a file upload component and an editor integration component:

ng g c spire/uploadFile
ng g c spire/officeJS

This generates two folders in src/app/spire/: upload-file/ and office-js/.

(2) Configure the upload component (upload-file)

This component handles file selection (drag-and-drop or click), converts files to binary format, stores data in the global state, and navigates to the editor page.

• Define the upload interface style (upload-file.css):

:host {
  display: block;
  min-height: 100vh;
}

.upload-main {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.upload-container {
  width: 80%;
  max-width: 600px;
  padding: 40px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.drop-area {
  border: 2px dashed #ccc;
  border-radius: 6px;
  padding: 40px;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.drop-area.highlight {
  border-color: #4CAF50;
  background-color: #f0fff0;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

button:hover {
  background-color: #45a049;
}

#fileInput {
  display: none; /* Hide the native file selection box */
}

• Set the upload interface structure (upload-file.html), supporting both drag-and-drop upload and click-to-select file:

<main class="upload-main">
  <div class="upload-container">
    <h2>Upload Your File</h2>
    <div class="drop-area" id="dropArea">
      <p>Drag and drop your file to the browser</p>
      <p>or</p>
      <button id="browseBtn" #browseBtn (click)="handleButtonClick($event)">Click to select your file</button>
      <input type="file" id="fileInput" #fileInput (change)="handleDrop($event)">
    </div>
  </div>
</main>

• Implement upload logic (upload-file.ts), handling file drag-and-drop, selection, binary conversion, and state storage:

import { ViewChild, ElementRef, Component, AfterViewInit, inject } from '@angular/core';
import { Router } from '@angular/router';
import { fileStore } from '../../store/index';

@Component({
  selector: 'app-upload-file',
  imports: [],
  templateUrl: './upload-file.html',
  styleUrl: './upload-file.css',
})
export class UploadFile implements AfterViewInit {
  constructor(private router: Router) { }
  // Inject state management store
  store = inject(fileStore);

  // Bind HTML elements
  @ViewChild('browseBtn') browseBtn!: ElementRef<HTMLButtonElement>;
  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;

  file: File | null = null; // Uploaded file object
  fileUint8Data: Uint8Array | null = null; // File binary data

  // Execute after component view initialization is complete
  ngAfterViewInit() {
    this.init();
  }

  // Initialize drag-and-drop event listening
  init() {
    // Prevent default browser behavior for drag-and-drop
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
      document.addEventListener(eventName, this.preventDefaults, false);
    });

    // Listen for file drop events
    document.addEventListener('drop', (e) => {
      this.handleDrop.call(this, e);
    }, false);
  }

  // Prevent default events
  preventDefaults(e: Event) {
    e.preventDefault();
    e.stopPropagation();
  }

  // Trigger native file input when select file is clicked
  handleButtonClick(e: Event) {
    e.preventDefault();
    this.fileInput.nativeElement.click();
  }

  // Handle file selection (drag-and-drop or click)
  async handleDrop(e: any) {
    // Retrieve file object
    if (e.target && e.target.files) {
      this.file = e.target.files[0];
    } else if (e.dataTransfer && e.dataTransfer.files) {
      this.file = e.dataTransfer.files[0];
    }

    // Convert file to Uint8Array binary format
    this.fileUint8Data = await this.handleFile(this.file) as Uint8Array;

    // Update global state
    this.store.setFileData(this.file);
    this.store.setFileUint8Data(this.fileUint8Data);

    // Navigate to editor
    this.openDocument();
  }

  // Convert file to Uint8Array binary data
  handleFile(file: any) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => {
        const arrayBuffer = reader.result as ArrayBuffer;
        const uint8Array = new Uint8Array(arrayBuffer);
        resolve(uint8Array);
      };
      reader.onerror = (error) => reject(error);
      reader.readAsArrayBuffer(file); // Read file in ArrayBuffer format
    });
  }

  // Navigate to the editor page (route navigation)
  openDocument() {
    this.router.navigate(['spire']);
  }
}

(3) Configure the editor component (office-js)

The editor component loads the Spire.OfficeJS script, initializes the editor, and configures editing permissions.

• Define the editor container (office-js.html):

<div class="form">
    <div id="iframeEditor">
    </div>
</div>

• Implement core logic such as editor script loading, configuration initialization, file parsing, and event listening (office-js.ts):

import { Component, AfterViewInit, inject } from '@angular/core';
import { Router } from '@angular/router';
import { fileStore } from '../../store/index';

// Declare global SpireCloudEditor (from Spire.OfficeJS script)
declare const SpireCloudEditor: any;

@Component({
  selector: 'app-office-js',
  imports: [],
  templateUrl: './office-js.html',
  styleUrl: './office-js.css',
})
export class OfficeJS implements AfterViewInit {
  constructor(private router: Router) { };
  // Inject state management store
  store = inject(fileStore);

  // Get file data from store
  file = this.store.file() as File;
  fileUint8Data = this.store.fileUint8Data() as Uint8Array;
  originUrl = window.location.origin; // Current project domain name
  Editor: any; // Editor instance
  config: any; // Editor configuration
  Api: any;    // Editor API

  // Execute after component view initialization is complete
  ngAfterViewInit() {
    this.init();
  }

  // Initialize editor (redirect to upload if no file exists)
  init() {
    if (!this.file) {
      this.router.navigate(['']);
      return;
    }
    this.loadSrcipt(); // Load editor script
  }

  // Dynamically load SpireCloudEditor.js
  loadSrcipt() {
    const script = document.createElement('script');
    // Match static resource path
    script.setAttribute('src', '/spire.cloud/web/editors/spireapi/SpireCloudEditor.js');
    script.onload = () => this.initEditor(); // Initialize editor after script loading is complete
    document.head.appendChild(script);
  }

  // Initialize editor configuration and instance
  initEditor() {
    const iframeId = 'iframeEditor'; // Match container ID in the template file
    this.initConfig();
    this.Editor = new SpireCloudEditor.OpenApi(iframeId, this.config);
    this.Api = this.Editor.GetOpenApi(); // Get editor API
    this.OnWindowReSize(); // Adapt to window size
  }

  // Configure editor settings (file information + user permissions + editor behavior)
  initConfig() {
    this.config = {
      "fileAttrs": {
        "fileInfo": {
          "name": this.file.name, // File name
          "ext": this.getFileExtension(), // File suffix
          "primary": String(new Date().getTime()), // Unique ID (timestamp)
          "creator": "",
          "createTime": ""
        },
        "sourceUrl": `${this.originUrl}/files/__ffff_192.168.3.121/${this.file.name}`,
        "createUrl": `${this.originUrl}/open`,
        "mergeFolderUrl": "",
        "fileChoiceUrl": "",
        "templates": {}
      },
      "user": {
        "id": "uid-1",
        "name": "Jonn",
        "canSave": true, // Allow file saving
      },
      "editorAttrs": {
        "editorMode": this.file.name.endsWith('.pdf') ? 'view' : "edit", // PDF = preview only
        "editorWidth": "100%",
        "editorHeight": "100%",
        "editorType": "document",
        "platform": "desktop",
        "viewLanguage": "en", // English interface
        "isReadOnly": false,
        "canChat": true,
        "canComment": true,
        "canReview": true,
        "canDownload": true, // Allow file downloads
        "canEdit": this.file.name.endsWith('.pdf') ? false : true, // Disable editing for PDFs
        "canForcesave": true,
        "embedded": {
          "saveUrl": "",
          "embedUrl": "",
          "shareUrl": "",
          "toolbarDocked": "top" // Toolbar aligned to top
        },
        // Enable WebAssembly for faster performance（Supports Word/Excel/PPT/PDF）
        "useWebAssemblyDoc": true,
        "useWebAssemblyExcel": true,
        "useWebAssemblyPpt": true,
        "useWebAssemblyPdf": true,
        // License keys (add if available)
        "spireDocJsLicense": "",
        "spireXlsJsLicense": "",
        "spirePresentationJsLicense": "",
        "spirePdfJsLicense": "",
        "serverless": {
          "useServerless": true,
          "baseUrl": this.originUrl,
          "fileData": this.fileUint8Data, // Pass binary file data
        },
        "events": {
          "onSave": this.onFileSave // Save callback event
        },
        "plugins": {
          "pluginsData": []
        }
      }
    };
  }

  // Adjust editor size to fit window
  OnWindowReSize() {
    const wrapEl = document.getElementsByClassName("form") as any;
    if (wrapEl.length) {
      wrapEl[0].style.height = window.innerHeight + "px";
      window.scrollTo(0, -1);
    }
  }

  // Extract file extension
  getFileExtension() {
    const filename = this.file.name.split(/[\\/]/).pop() as String;
    return filename.substring(filename.lastIndexOf('.') + 1).toLowerCase() || '';
  }

  // Custom save logic (can be extended according to requirements)
  onFileSave(data: any) {
    console.log('Saved data：', data);
  }
}

4. Configure Routing

Enable navigation between the upload and editor pages.

• Modify routing rules (app.routes.ts), configure routes for the upload page and editor page:

import { Routes } from '@angular/router';
import { UploadFile } from './spire/upload-file/upload-file';
import { OfficeJS } from './spire/office-js/office-js';

export const routes: Routes = [
  { path: '', component: UploadFile }, // Default: upload page
  { path: 'spire', component: OfficeJS } // Editor page: /spire
];

• Ensure the routing configuration takes effect (app.config.ts):

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes), // Inject routing configuration
  ]
};

• Set route outlet (app.html) to ensure the page is rendered correctly:

<main class="app-main">
  <router-outlet /> <!-- Route outlet: render the component corresponding to the current route -->
</main>

Launch & Function Validation

1. Start the Project

Save all changes and restart the development server:

npm run start

2. Test Core Functions

• Access the upload page: Visit http://localhost:4200/ in the browser, and the "Upload Your File" interface is displayed, supporting two upload methods:
  • Drag and drop files to the specified area in the browser;
  • Click to select file from the local (supporting formats such as Word, Excel, PPT, PDF).

• Edit documents online: After uploading, you’ll be redirected to the editor page (http://localhost:4200/spire). The editor supports:
  • Editing Word, Excel, and PowerPoint files (PDFs are preview-only).
  • Adding annotations, comments, and track changes.
  • A user-friendly English interface with an intuitive toolbar.

• Download / convert documents: After editing, click "File" → "Download as" on the top of the editor to export the document to various formats such as PDF, TXT, RTF, HTML, etc.

Frequently Asked Questions

Q1: The editor fails to load and the page is blank?

• Verify Path: Ensure the SpireCloudEditor.js path in office-js.ts matches the deployed static resource path.
• Browser compatibility: Upgrade to browsers that support WebAssembly such as Chrome 100+

Q2: When installing NgRx dependencies, a peer dependency conflict is prompted?

• Use the --legacy-peer-deps flag to force compatibility:

npm install @ngrx/signals @ngrx/store --legacy-peer-deps

• Or adjust your Angular version to match NgRx’s compatibility requirements.

Q3: When starting the project, the browser console reports an error, indicating that the zone.js module cannot be found?

• Reason: The "zoneless" mode was mistakenly selected during project initialization, but Spire.OfficeJS requires zone.js for async events.
• Solution:
  • First install the zone.js dependency: npm install zone.js --save
  • Then open src/main.ts and add the import at the top of the file: import 'zone.js';
  • Finally, restart the project and confirm that the error disappears.

Download Complete Sample

Get the full Angular + Spire.OfficeJS integration project with pre-configured code and resources. Run it directly to test all features.

Click to download

Apply for a Temporary License

To remove the evaluation message from generated documents or lift feature limitations, contact us to obtain a 30-day temporary license.

As modern front-end technologies evolve, more web applications are bringing Office document viewing and editing directly into the browser to improve performance, security, and user experience. React, one of the most popular front-end frameworks, is widely used to build document-centric applications.

In this article, you'll learn how to integrate Spire.OfficeJS into a React project to handle Word, Excel, PowerPoint, and PDF files efficiently on the client side.

Page Content:

• What Is Spire.OfficeJS
• Create a React Project and Integrate Spire.OfficeJS
• Implement File Upload and Editor Pages
• Run the project
• Demo Download
• FAQs

What Is Spire.OfficeJS

Spire.OfficeJS is a pure front-end document component suite developed by E-ICEBLUE, enabling the creation, viewing, and editing of Word, Excel, and PowerPoint documents, with built-in support for PDF viewing. Developers can complete the entire document workflow in the browser, from opening and editing to exporting, without installing Microsoft Office or relying on backend services.

Designed for performance and easy integration, Spire.OfficeJS fits a wide range of document-driven applications, from online platforms to education systems and admin dashboards.

Spire.OfficeJS product package includes the following components:

• Spire.WordJS
• Spire.ExcelJS
• Spire.PresentationJS
• Spire.PDFJS

Core Features:

• Multi-format support: Preview, edit, and export Word, Excel, and PowerPoint documents, with PDF preview support.
• Online editing: Edit Office documents directly in the browser, including text, tables, images, and styles.
• High-performance, pure front-end execution: Powered by WebAssembly, delivering lightweight loading and efficient performance with no backend involvement.
• Flexible integration: Easily integrates with React, Vue, Angular, and can also be used conveniently with vanilla JavaScript.

Create a React Project and Integrate Spire.OfficeJS

Step 1. Install Node.js

Download and install Node.js from the official website(https://nodejs.org/en/download/). After installation, open Command Prompt (cmd) and run the following command to verify the installed version:

node -v
npm -v

Step 2. Create a New React Project with Vite

Choose a project directory, open Command Prompt (cmd), and run the following command:

npm create vite@latest officejs-demo -- --template react

A new React project will be created and initialized.

Step 3. Install Dependencies Using npm

Open the "officejs-demo" project in VS Code, then run the following command to install "react-router-dom", which provides routing and navigation between pages:

npm install react-router-dom

Step 4. Integrate Spire.OfficeJS

Download the Spire.OfficeJS package. In your React project, create a new spire.officejs folder under the public directory, then copy the web folder from the extracted package into it. Ensure that the directory path matches the path referenced in Editor.jsx.

Implement File Upload and Editor Pages

1. App.jsx: Configure Routing and Global File State Management

Code:

import { createContext, useContext, useState } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './Home';
import Editor from './Editor';

//File state context
const FileContext = createContext();

export const useFileStore = () => useContext(FileContext);

function FileProvider({ children }) {
  const [file, setFile] = useState(null);
  const [fileUint8Data, setFileUint8Data] = useState(null);

  return (
    <FileContext.Provider value={{
      file,
      fileUint8Data,
      setFileData: setFile,
      setFileUint8Data
    }}>
      {children}
    </FileContext.Provider>
  );
}

const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/editor', element: <Editor /> },
]);

function App() {
  return (
    <FileProvider>
      <RouterProvider router={router} />
    </FileProvider>
  );
}

export default App;

2. Home.jsx: Set Up File Upload, File Handling, and Editor Navigation

Explanation:

• FileReader: To read local files from the user's device.
• Uint8Array: The binary data format required by OfficeJS WebAssembly for data input.
• useNavigate: A React Router hook for programmatic navigation between pages.
• Drag and Drop: Browser-based drag-and-drop support for file uploads.

Code:

import { useRef, useEffect } from "react"
import { useFileStore } from './App';
import { useNavigate } from 'react-router-dom';

function Home() {
    const { setFileData, setFileUint8Data } = useFileStore();
    const navigate = useNavigate();

    let dropArea = null;
    let fileInput = useRef();
    let file = null;
    let fileUint8Data = null;

    useEffect(() => {
        dropArea = document;

        //Prevent the default drag-and-drop behavior
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });

        //Handle file drag-and-drop
        dropArea.addEventListener('drop', handleDrop, false);
    }, [])

    const preventDefaults = (e) => {
        e.preventDefault();
        e.stopPropagation();
    }

    const handleBtnClick = (e) => {
        e.preventDefault();
        fileInput.current.click();
    }

    const handleDrop = async (e) => {
        if (e.target && e.target.files)
            file = e.target.files[0]
        else if (e.dataTransfer && e.dataTransfer.files)
            file = e.dataTransfer.files[0];

        if (!file) return;

        fileUint8Data = await handleFile(file);
        setFileData(file);
        setFileUint8Data(fileUint8Data);
        openDocument();
    }

    const handleFile = (file) => {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => {
                const arrayBuffer = reader.result;
                const uint8Array = new Uint8Array(arrayBuffer);
                resolve(uint8Array);
            };
            reader.onerror = (error) => reject(error);
            reader.readAsArrayBuffer(file);
        });
    }

    const openDocument = () => {
        navigate('/editor')
    }

    return (
        <div>
            <div>
                <h2>Upload Your File</h2>
                <div>
                    <p>Drag your file to the browser</p>
                     <p style={{ marginLeft: '20px' }}>or</p>
                    <button ref={fileInput} onClick={handleBtnClick}>Choose Your File</button>
                    <input
                        type="file"
                        id="fileInput"
                        ref={fileInput}
                        onChange={handleDrop}
                        style={{ display: 'none' }}
                    />
                </div>
            </div>
        </div>
    )
}

export default Home

3. Editor.jsx: Add and Integrate the OfficeJS Editor

Code:

import { useRef, useEffect } from "react"
import { useFileStore } from './App';
import { useNavigate } from 'react-router-dom';

function Editor() {
    const { file, fileUint8Data } = useFileStore();
    const navigate = useNavigate();

    const config = useRef({});
    let Editor = useRef(null);
    let Api = useRef(null);
    let originUrl = window.location.origin;

    useEffect(() => {
        if (!file) {
            navigate('/')
            return;
        }
        // Dynamically load Spire.OfficeJS
        loadScript();
    }, [])

    const loadScript = () => {
        var script = document.createElement('script');
        //Adjust according to your product package path
        script.setAttribute('src', '/spire.officejs/web/editors/spireapi/SpireCloudEditor.js');
        script.onload = () => initEditor()
        document.head.appendChild(script);
    }

    const initEditor = () => {
        let iframeId = 'iframeEditor';
        initConfig();
        Editor = new SpireCloudEditor.OpenApi(iframeId, config.value);
        window.Api = Api = Editor.GetOpenApi();
        OnWindowReSize();
    }

    const initConfig = () => {
        config.value = {
            "fileAttrs": {
                "fileInfo": {
                    "name": file.name,
                    "ext": getFileExtension(),
                    "primary": String(new Date().getTime()),
                    "creator": "User",
                    "createTime": new Date().toLocaleString()
                },
                "sourceUrl": originUrl + "/files/" + file.name,
                "createUrl": originUrl + "/open",
                "mergeFolderUrl": "",
                "fileChoiceUrl": "",
                "templates": {}
            },
            "user": {
                "id": "uid-1",
                "name": "User",
                "canSave": true,
            },
            "editorAttrs": {
                "editorMode": "edit",
                "editorWidth": "100%",
                "editorHeight": "100%",
                "editorType": "document",  // document/spreadsheet/presentation
                "platform": "desktop",
                "viewLanguage": "en",  // en/zh
                "isReadOnly": false,
                "canChat": true,
                "canComment": true,
                "canReview": true,
                "canDownload": true,
                "canEdit": true,
                "canForcesave": true,
                "embedded": {
                    "saveUrl": "",
                    "embedUrl": "",
                    "shareUrl": "",
                    "toolbarDocked": "top"
                },
                //Enable WebAssembly to improve performance
                "useWebAssemblyDoc": true,
                "useWebAssemblyExcel": true,
                "useWebAssemblyPpt": true,
                "spireDocJsLicense": "",
                "spireXlsJsLicense": "",
                "spirePresentationJsLicense": "",
                "spirePdfJsLicense": "",
                //Serverless mode: process files directly in memory without a backend
                "serverless": {
                    "useServerless": true,
                    "baseUrl": originUrl,
                    "fileData": fileUint8Data,  //The file's Uint8Array data
                },
                "events": {
                    "onSave": onFileSave
                },
                "plugins": {
                    "pluginsData": []
                }
            }
        };
    }

    const OnWindowReSize = () => {
        let wrapEl = document.getElementById("editor-container");
        if (wrapEl) {
            wrapEl.style.height = screen.availHeight + "px";
            window.scrollTo(0, -1);
            wrapEl.style.height = window.innerHeight + "px";
        }
    }

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

    const onFileSave = (data) => {
        console.log('Saved data:', data)
        //Implement the save logic here
        //For example, send the file to a server or download it
    }

    return (
        <div id="editor-container">
            <div id="iframeEditor"></div>
        </div>
    )
}

export default Editor

4. main.jsx

Code:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  //Note: React StrictMode causes the Spire  editor to render twice, so it's recommended to disable it
  <App />
)

5. vite.config.js - Customize the Development Server Port

Code:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 5174
  },
  plugins: [react()],
})

Run the Project

Run the command npm run dev to start the configured project, then open your browser and visit http://localhost:5174/.

Upload a local document by dragging or clicking "Choose Your File" to open it for editing.

Go to "File > Download As" to download the document or convert it to other formats.

Demo Download

Click to download

FAQs:

1. Project creation error due to incompatible npm or Node.js versions:

This usually occurs when Node.js is outdated. Update to the latest version of Node.js to resolve the issue.

2. Dependency installation failure:

• Clear the npm cache.
• Delete node_modules and package-lock.json, then reinstall dependencies.
• Ensure you are in the correct project directory and do not run installation commands outside the Vite project.

3. Spire.OfficeJS files cannot be loaded:

• Verify that the web folder has been copied to the correct directory.
• Make sure the development server can access resources under the public directory at runtime.

Apply for License

To remove the evaluation message from generated documents or lift feature limitations, contact us to obtain a 30-day temporary license.