Server App in Visual Studio 2019 in Blazor DocumentEditor component

03 Aug 2021 / 3 minutes to read

This article provides the step-by-step instructions to integrate the Word processor in Blazor server app using Visual Studio 2019.

Steps to get started with Word processor component for Blazor:

Select Create a new project from the Visual Studio dashboard.

new project in blazor

Select Blazor App from the template and click the Next button.

Blazor app

In the project configuration window, click the Create button to create a new project with the default project configuration.

asp.net core project configuration

Select Blazor Server App from the dashboard and click the Create button to create a new Blazor Server application. Make sure that .NET Core and ASP.NET Core 3.1 are selected at the top.

select framework

Install the Syncfusion.Blazor.WordProcessor NuGet package to the newly created application by using the NuGet Package Manager. Right-click the project and select Manage NuGet Packages.
Search Syncfusion.Blazor.WordProcessor keyword in the Browse tab and install Syncfusion.Blazor.WordProcessor NuGet package in the application.

select nuget

Open the ~/_Imports.razor file and import the Syncfusion.Blazor.DocumentEditor.

@using Syncfusion.Blazor.DocumentEditor

Add the Syncfusion Word processor component (a.k.a DocumentEditor) to any webpages (razor) in the Pages folder. For example, the DocumentEditorContainer component is added to the ~/Pages/Index.razor page.

<SfDocumentEditorContainer EnableToolbar=true></SfDocumentEditorContainer>

Add the SyncfusionBlazor service in ConfigureServices method of Startup.cs file.

 public void ConfigureServices(IServiceCollection services) {
     .......
     .......
     services.AddSyncfusionBlazor();
 }

Add the client-side resources through CDN or local npm package in the <head> element of the ~/Pages/_Host.cshtml page.

<head>
    ....
    ....
    <link href="https://cdn.syncfusion.com/blazor/19.2.49/styles/material.css" rel="stylesheet" />
</head>

Run the application. The Word processor component will be rendered in the web browser.

DocumentEditor Sample

To load an existing document during control initialization, use the following code example, which opens a Word document. Convert it to SFDT and load in the editor.

@using System.IO;
@using Syncfusion.Blazor.DocumentEditor;

<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
</SfDocumentEditorContainer>

@code {

    SfDocumentEditorContainer container;

    public void OnCreated(object args)
    {
        string filePath = "wwwroot/data/GettingStarted.docx";
        using (FileStream fileStream = new FileStream(filePath, System.IO.FileMode.Open, System.IO.FileAccess.Read))
        {
            WordDocument document = WordDocument.Load(fileStream, ImportFormatType.Docx);
            string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
            document.Dispose();
            //To observe the memory go down, null out the reference of document variable.
            document = null;
            SfDocumentEditor editor = container.DocumentEditor;
            editor.Open(json);
            //To observe the memory go down, null out the reference of json variable.
            json = null;
        }
    }
}

Note: As per the discussion thread #30064, please null out the reference of streams and other instances when they are no longer required. Using this approach you’ll observe the memory go down and become stable.

DocumentEditor Sample