Search results

Create a Blazor server-side Word processing application

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

Steps to get started with Word processor component for Blazor:

  1. Select Create a new project from the Visual Studio dashboard.

    new project in aspnetcore blazor

  2. Select ASP.NET Core Web Application from the template and click the Next button.

    asp.net core template

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

    asp.net core project configuration

  4. Select Blazor (server-side) from the dashboard and click the Create button to create a new Blazor server-side application. Make sure that .NET Core and ASP.NET Core 3.0 are selected at the top.

    select framework

  5. Install the Syncfusion.EJ2.WordEditor.Blazor NuGet package to the newly created application by using the NuGet Package Manager. Ensure to check the Include prerelease option. Right-click the project and select Manage NuGet Packages.

  6. Search Syncfusion.EJ2.WordEditor.Blazor keyword in the Browse tab and install Syncfusion.EJ2.WordEditor.Blazor NuGet package in the application.

    select nuget

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

    @using Syncfusion.EJ2.DocumentEditor.Blazor
  8. Add the client-side resources through CDN or local npm package to the <head> element of the ~/Pages/_Host.cshtml page.

    <head>
        .......
    
        .......
    
        <link href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet" />
        <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script>
        <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ejs.interop.min.js"></script>
    </head>
  9. 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.

    <EjsDocumentEditorContainer EnableToolbar=true></EjsDocumentEditorContainer>
  10. Run the application. The Word processor component will be rendered in the web browser.

    DocumentEditor Sample

  11. 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.EJ2.Blazor.DocumentEditor;
    @using WDocument = Syncfusion.EJ2.DocumentEditor;
    
    <EjsDocumentEditorContainer @ref="container" EnableToolbar=true>
        <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>
    </EjsDocumentEditorContainer>
    
    @code {
    
        EjsDocumentEditorContainer 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))
            {
                WDocument.WordDocument document = WDocument.WordDocument.Load(fileStream, WDocument.FormatType.Docx);
                string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
                document.Dispose();
                DocumentEditorModule editor = container.GetDocumentEditor();
                editor.Open(json);
            }
        }
    }

    DocumentEditor Sample