Spire.OfficeJS.Blazor 11.7.0

Blazor component library for in-browser Office document editing

Product Page | Tutorials | Demo | Examples | Forum | Blog | Customized Demo | Temporary License

Introduction

Spire.OfficeJS.Blazor is a .NET Blazor component library built on top of Spire.OfficeJS. It encapsulates native Spire.OfficeJS capabilities into pure Blazor components. Developers do not need to manually implement JavaScript interop boilerplate to embed online editors inside Blazor applications. The library supports loading documents, save event callbacks, UI customization and permission control, seamlessly connecting the web-based document editor with your .NET backend business logic.

Key Benefits

• Fast Integration Component-based usage eliminates complex JS interop work and reduces frontend development effort.
• Full Office Experience Supports online editing for Word documents, Excel spreadsheets, PowerPoint presentations, plus PDF document preview.
• High Controllability Flexible configuration for editor UI panels, operation permissions and read/edit modes.
• Broad Blazor Compatibility Works with Blazor Server, Blazor WebAssembly and Blazor Web App.

Target Scenarios

OA & workflow systems: Online editing of contracts, reports and business forms. Private enterprise intranets and on-premises document processing solutions. SaaS platforms requiring embedded online document editing and document persistence workflows.

Feature Highlights

• Online editing: Word / Spreadsheet (Excel) / Presentation (PowerPoint); PDF document preview
• Bidirectional save event bridge: Binary document stream delivered from JavaScript to .NET via interop for custom storage
• Dynamic switching between read-only and editing modes**
• Auto document type detection via DocumentType; you may also force a specific editor type
• Activate official Spire front-end / WASM license using LicenseKey
• Generate stable unique document identifiers based on OOXML metadata or local file creation timestamp
• Fine-grained UI toggle options: ruler, status bar, navigation pane, review panel, comment panel, etc.
• Built-in multi-language UI support

Architecture Overview

• Blazor Component Layer: Core component SpireEditor (namespace: Spire.OfficeJS.Blazor)
• Configuration Model Layer: EditorSettings, EditorType — automatically serialized into editor JSON configuration
• Event Arguments: SaveEventArgs, containing DocumentName and raw DocumentBytes
• JS Interop Bridge: spire-editor.js — responsible for editor initialization and event forwarding
• Static Assets: Scripts, fonts and images embedded within the Spire.OfficeJS.Blazor assembly

Supported Platforms & Runtimes

• Target Frameworks: .NET 8 / .NET 9 / .NET 10
• Hosting Models: Blazor Server, Blazor WebAssembly, Blazor Web App

Quick Start Example

@page "/word-editor"
@using Spire.OfficeJS.Blazor
@rendermode InteractiveServer

<SpireEditor
    DocumentUrl="/files/sample.docx"
    Width="100%"
    Height="800px"
    Settings="@settings"
    OnSave="@HandleSave" />

@code {
    private EditorSettings settings = new()
    {
        LicenseKey = "YOUR_LICENSE_KEY",
        DocumentType = EditorType.Word,
        Language = "en",
        EnableDownload = true,
        EnableComment = true,
        EnableReview = true
    };

    private async Task HandleSave(SaveEventArgs args)
    {        
        Directory.CreateDirectory("SavedFiles");
        string savePath = Path.Combine("SavedFiles", Path.GetFileName(args.DocumentName));
        await File.WriteAllBytesAsync(savePath, args.DocumentBytes);
    }

Editor Type Switch Reference

Word Editor

DocumentUrl="/files/sample.docx"
DocumentType = EditorType.Word

Excel Spreadsheet Editor

DocumentUrl="/files/sample.xlsx"
DocumentType = EditorType.Spreadsheet

PowerPoint Presentation Editor

DocumentUrl="/files/sample.pptx"
DocumentType = EditorType.Presentation

PDF Previewer

DocumentUrl="/files/sample.pdf"
DocumentType = EditorType.Pdf

License

A valid Spire LicenseKey is required for production usage. For licensing information, please contact sales@e-iceblue.com or get a Temporary License here.