Create Word Document in Blazor

Syncfusion^® Essential^® DocIO is a .NET Core Word library used to create, read, and edit Word documents programmatically without Microsoft Word or interop dependencies. Using this library, a create a Word document in Blazor.

To quickly get started with creating a Word document in Blazor, watch this video:

Blazor Web App Server Application

• Visual Studio
• Visual Studio Code
• JetBrains Rider

Prerequisites:

• Visual Studio 2022.
• Install .NET 8 SDK or later.

Step 1: Create a new C# Blazor Web app project.

• Select “Blazor Web App” from the template and click Next.

• Name the project and click Next.

• Select the framework and click Create button.

Step 2: Install the Syncfusion.DocIO.Net.Core NuGet package.

To create a Word document in a Blazor Web App Server, install Syncfusion.DocIO.Net.Core into the Blazor project.

NOTE

Starting with v16.2.0.x, if Syncfusion^® assemblies are referenced from trial setup or from the NuGet feed, the “Syncfusion.Licensing” assembly reference must also be added and a license key included in projects. Refer to this link to know about registering Syncfusion^® license key in an application to use Syncfusion components.

Step 3: Create a Razor file named DocIO.razor in the Pages folder, which is located inside the Components folder.

Include the following namespaces in the file:

C#

@rendermode InteractiveServer
@page "/DocIO"
@using System.IO;
@using Create_Word_document;
@inject Create_Word_document.Data.WordService service
@inject Microsoft.JSInterop.IJSRuntime JS

Step 4: Add a button to DocIO.razor.

Include the following code to create a new button that triggers document creation:

CSHTML

<h2>Syncfusion DocIO Library (Essential DocIO)</h2>
<p>The Syncfusion DocIO library (Essential DocIO) is a Blazor DocIO library used to create, read, edit, and convert Word files in applications without Microsoft Office dependencies.</p>
<button class="btn btn-primary" @onclick="@CreateWord">Create Word</button>

Step 5: Implement CreateWord method in DocIO.razor.

Add the following code to create and download the Word document:

C#

@code {
    MemoryStream documentStream;
    /// <summary>
    /// Creates and downloads the Word document.
    /// </summary>
    protected async void CreateWord()
    {
        documentStream = service.CreateWord();
        await JS.SaveAs("Sample.docx", documentStream.ToArray());
    }
}

Step 6: Create a new cs file WordService.cs in the Data folder.

Include the following namespaces in the file:

C#

using Syncfusion.DocIO;
using Syncfusion.DocIO.DLS;
using System.IO;

Step 7: Implement the CreateWord method in WordService.cs.

Create a new MemoryStream method named CreateWord in the WordService class, and include the following code snippet to create a simple Word document in Blazor Web App Server:

C#

public MemoryStream CreateWord()
{
    // Creating a new Word document
    WordDocument document = new WordDocument();
    // Adding a new section to the document
    WSection section = document.AddSection() as WSection;
    // Set Margin of the section
    section.PageSetup.Margins.All = 72;
    // Set page size of the section
    section.PageSetup.PageSize = new Syncfusion.Drawing.SizeF(612, 792);

    // Create Paragraph styles
    WParagraphStyle style = document.AddParagraphStyle("Normal") as WParagraphStyle;
    style.CharacterFormat.FontName = "Calibri";
    style.CharacterFormat.FontSize = 11f;
    style.ParagraphFormat.BeforeSpacing = 0;
    style.ParagraphFormat.AfterSpacing = 8;
    style.ParagraphFormat.LineSpacing = 13.8f;

    style = document.AddParagraphStyle("Heading 1") as WParagraphStyle;
    style.ApplyBaseStyle("Normal");
    style.CharacterFormat.FontName = "Calibri Light";
    style.CharacterFormat.FontSize = 16f;
    style.CharacterFormat.TextColor = Syncfusion.Drawing.Color.FromArgb(46, 116, 181);
    style.ParagraphFormat.BeforeSpacing = 12;
    style.ParagraphFormat.AfterSpacing = 0;
    style.ParagraphFormat.Keep = true;
    style.ParagraphFormat.KeepFollow = true;
    style.ParagraphFormat.OutlineLevel = OutlineLevel.Level1;

    IWParagraph paragraph = section.HeadersFooters.Header.AddParagraph();
    paragraph.ApplyStyle("Normal");
    paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Left;
    WTextRange textRange = paragraph.AppendText("Adventure Works Cycles") as WTextRange;
    textRange.CharacterFormat.FontSize = 12f;
    textRange.CharacterFormat.FontName = "Calibri";
    textRange.CharacterFormat.TextColor = Syncfusion.Drawing.Color.Red;

    // Appends paragraph
    paragraph = section.AddParagraph();
    paragraph.ApplyStyle("Heading 1");
    paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center;
    textRange = paragraph.AppendText("Adventure Works Cycles") as WTextRange;
    textRange.CharacterFormat.FontSize = 18f;
    textRange.CharacterFormat.FontName = "Calibri";

    // Appends paragraph
    paragraph = section.AddParagraph();
    paragraph.ParagraphFormat.FirstLineIndent = 36;
    paragraph.BreakCharacterFormat.FontSize = 12f;
    textRange = paragraph.AppendText("Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base.") as WTextRange;
    textRange.CharacterFormat.FontSize = 12f;

    // Appends paragraph
    paragraph = section.AddParagraph();
    paragraph.ParagraphFormat.FirstLineIndent = 36;
    paragraph.BreakCharacterFormat.FontSize = 12f;
    textRange = paragraph.AppendText("In 2000, AdventureWorks Cycles bought a small manufacturing plant, Importadores Neptuno, located in Mexico. Importadores Neptuno manufactures several critical subcomponents for the AdventureWorks Cycles product line. These subcomponents are shipped to the Bothell location for final product assembly. In 2001, Importadores Neptuno, became the sole manufacturer and distributor of the touring bicycle product group.") as WTextRange;
    textRange.CharacterFormat.FontSize = 12f;

    // Saves the Word document to MemoryStream
    MemoryStream stream = new MemoryStream();
    document.Save(stream, FormatType.Docx);
    // Closes the Word document
    document.Close();
    stream.Position = 0;
    return stream;
}

Step 8: Add the service in Program.cs.

Add the following line to the Program.cs file to register WordService as a scoped service in the Blazor application.

C#

builder.Services.AddScoped<Create_Word_document.Data.WordService>();

Step 9: Create FileUtils.cs for JavaScript interoperability.

Create a new class file named FileUtils in the project and add the following code to invoke the JavaScript action for file download in the browser.

C#

public static class FileUtils
{
    public static ValueTask<object> SaveAs(this IJSRuntime js, string filename, byte[] data)
       => js.InvokeAsync<object>(
            "saveAsFile",
            filename,
            Convert.ToBase64String(data));
}

Step 10: Add JavaScript function to App.razor.

Add the following JavaScript function in the App.razor file located in the Pages folder.

HTML

<script type="text/javascript">
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download document in Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

Step 11: Add navigation link.

Add the following code snippet to the Navigation menu’s Razor file in the Layout folder.

HTML

<div class="nav-item px-3">
    <NavLink class="nav-link" href="docio">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Create Word
    </NavLink>
</div>

Step 12: Build the project.

Click on Build → Build Solution or press Ctrl+Shift+B to build the project.

Step 13: Run the project.

Click the Start button (green arrow) or press F5 to run the application.

A complete working sample is available on GitHub.

Upon executing the program, the Word document will be generated as follows:

Prerequisites:

• Visual Studio Code.
• Install .NET 8 SDK or later.
• Open Visual Studio Code and install the C# for Visual Studio Code extension from the Extensions Marketplace.

Step 1: Create a new C# Blazor Web app project.

• Open the command palette by pressing Ctrl+Shift+P and type .NET:New Project and enter.
• Choose the Blazor Web App template.

• Select the project location, type the project name and press enter.
• Then choose Create project.

Step 2: To create a Word document in Blazor Web app Server, install Syncfusion.DocIO.Net.Core to the Blazor project.

• Press Ctrl + ` (backtick) to open the integrated terminal in Visual Studio Code.
• Ensure you’re in the project root directory where your .csproj file is located.
• Run the command dotnet add package Syncfusion.DocIO.Net.Core to install the NuGet package.

NOTE

Starting with v16.2.0.x, if Syncfusion^® assemblies are referenced from trial setup or from the NuGet feed, the “Syncfusion.Licensing” assembly reference must also be added and a license key included in projects. Refer to this link to know about registering Syncfusion^® license key in an application to use Syncfusion components.

Step 3: Create a Razor file named DocIO.razor in the Pages folder, which is located inside the Components folder.

Include the following namespaces in the file:

C#

@rendermode InteractiveServer
@page "/DocIO"
@using System.IO;
@using Create_Word_document;
@inject Create_Word_document.Data.WordService service
@inject Microsoft.JSInterop.IJSRuntime JS

Step 4: Add a button to DocIO.razor.

Include the following code to create a new button that triggers document creation:

CSHTML

<h2>Syncfusion DocIO Library (Essential DocIO)</h2>
<p>The Syncfusion DocIO library (Essential DocIO) is a Blazor DocIO library used to create, read, edit, and convert Word files in applications without Microsoft Office dependencies.</p>
<button class="btn btn-primary" @onclick="@CreateWord">Create Word</button>

Step 5: Implement CreateWord method in DocIO.razor.

Add the following code to create and download the Word document:

C#

@code {
    MemoryStream documentStream;
    /// <summary>
    /// Creates and downloads the Word document.
    /// </summary>
    protected async void CreateWord()
    {
        documentStream = service.CreateWord();
        await JS.SaveAs("Sample.docx", documentStream.ToArray());
    }
}

Step 6: Create a new cs file WordService.cs in the Data folder.

Include the following namespaces in the file:

C#

using Syncfusion.DocIO;
using Syncfusion.DocIO.DLS;
using System.IO;

Step 7: Implement the CreateWord method in WordService.cs.

Create a new MemoryStream method named CreateWord in the WordService class, and include the following code snippet to create a simple Word document in Blazor Web App Server:

C#

public MemoryStream CreateWord()
{
    // Creating a new Word document
    WordDocument document = new WordDocument();
    // Adding a new section to the document
    WSection section = document.AddSection() as WSection;
    // Set Margin of the section
    section.PageSetup.Margins.All = 72;
    // Set page size of the section
    section.PageSetup.PageSize = new Syncfusion.Drawing.SizeF(612, 792);

    // Create Paragraph styles
    WParagraphStyle style = document.AddParagraphStyle("Normal") as WParagraphStyle;
    style.CharacterFormat.FontName = "Calibri";
    style.CharacterFormat.FontSize = 11f;
    style.ParagraphFormat.BeforeSpacing = 0;
    style.ParagraphFormat.AfterSpacing = 8;
    style.ParagraphFormat.LineSpacing = 13.8f;

    style = document.AddParagraphStyle("Heading 1") as WParagraphStyle;
    style.ApplyBaseStyle("Normal");
    style.CharacterFormat.FontName = "Calibri Light";
    style.CharacterFormat.FontSize = 16f;
    style.CharacterFormat.TextColor = Syncfusion.Drawing.Color.FromArgb(46, 116, 181);
    style.ParagraphFormat.BeforeSpacing = 12;
    style.ParagraphFormat.AfterSpacing = 0;
    style.ParagraphFormat.Keep = true;
    style.ParagraphFormat.KeepFollow = true;
    style.ParagraphFormat.OutlineLevel = OutlineLevel.Level1;

    IWParagraph paragraph = section.HeadersFooters.Header.AddParagraph();
    paragraph.ApplyStyle("Normal");
    paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Left;
    WTextRange textRange = paragraph.AppendText("Adventure Works Cycles") as WTextRange;
    textRange.CharacterFormat.FontSize = 12f;
    textRange.CharacterFormat.FontName = "Calibri";
    textRange.CharacterFormat.TextColor = Syncfusion.Drawing.Color.Red;

    // Appends paragraph
    paragraph = section.AddParagraph();
    paragraph.ApplyStyle("Heading 1");
    paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center;
    textRange = paragraph.AppendText("Adventure Works Cycles") as WTextRange;
    textRange.CharacterFormat.FontSize = 18f;
    textRange.CharacterFormat.FontName = "Calibri";

    // Appends paragraph
    paragraph = section.AddParagraph();
    paragraph.ParagraphFormat.FirstLineIndent = 36;
    paragraph.BreakCharacterFormat.FontSize = 12f;
    textRange = paragraph.AppendText("Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base.") as WTextRange;
    textRange.CharacterFormat.FontSize = 12f;

    // Appends paragraph
    paragraph = section.AddParagraph();
    paragraph.ParagraphFormat.FirstLineIndent = 36;
    paragraph.BreakCharacterFormat.FontSize = 12f;
    textRange = paragraph.AppendText("In 2000, AdventureWorks Cycles bought a small manufacturing plant, Importadores Neptuno, located in Mexico. Importadores Neptuno manufactures several critical subcomponents for the AdventureWorks Cycles product line. These subcomponents are shipped to the Bothell location for final product assembly. In 2001, Importadores Neptuno, became the sole manufacturer and distributor of the touring bicycle product group.") as WTextRange;
    textRange.CharacterFormat.FontSize = 12f;

    // Saves the Word document to MemoryStream
    MemoryStream stream = new MemoryStream();
    document.Save(stream, FormatType.Docx);
    // Closes the Word document
    document.Close();
    stream.Position = 0;
    return stream;
}

Step 8: Add the service in Program.cs.

Add the following line to the Program.cs file to register WordService as a scoped service in the Blazor application.

C#

builder.Services.AddScoped<Create_Word_document.Data.WordService>();

Step 9: Create FileUtils.cs for JavaScript interoperability.

Create a new class file named FileUtils in the project and add the following code to invoke the JavaScript action for file download in the browser.

C#

public static class FileUtils
{
    public static ValueTask<object> SaveAs(this IJSRuntime js, string filename, byte[] data)
       => js.InvokeAsync<object>(
            "saveAsFile",
            filename,
            Convert.ToBase64String(data));
}

Step 10: Add JavaScript function to App.razor.

Add the following JavaScript function in the App.razor file located in the Pages folder.

HTML

<script type="text/javascript">
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download document in Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

Step 11: Add navigation link.

Add the following code snippet to the Navigation menu’s Razor file in the Layout folder.

HTML

<div class="nav-item px-3">
    <NavLink class="nav-link" href="docio">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Create Word
    </NavLink>
</div>

Step 12: Build the project.

Run the following command in terminal to build the project.

dotnet build

Step 13: Run the project.

Run the following command in terminal to run the project.

dotnet run

A complete working sample is available on GitHub.

Upon executing the program, the Word document will be generated as follows:

Prerequisites:

• JetBrains Rider.
• Install .NET 8 SDK or later.

Step 1. Open JetBrains Rider and create a new Blazor Web app project.

• Launch JetBrains Rider.
• Click new solution on the welcome screen.

• In the new Solution dialog, select Project Type as Web.
• Select the target framework (e.g., .NET 8.0, .NET 9.0).
• Choose template as Blazor Web App.
• Enter a project name and specify the location.
• Click create.

Step 2: Install the NuGet package from NuGet.org.

• Click the NuGet icon in the Rider toolbar and type Syncfusion.DocIO.Net.Core in the search bar.
• Ensure that “nuget.org” is selected as the package source.
• Select the latest Syncfusion.DocIO.Net.Core NuGet package from the list.
• Click the + (Add) button to add the package.

• Click the Install button to complete the installation.

NOTE

Starting with v16.2.0.x, if Syncfusion^® assemblies are referenced from trial setup or from the NuGet feed, the “Syncfusion.Licensing” assembly reference must also be added and a license key included in projects. Refer to this link to know about registering Syncfusion^® license key in an application to use Syncfusion components.

Step 3: Create a Razor file named DocIO.razor in the Pages folder, which is located inside the Components folder.

Include the following namespaces in the file:

C#

@rendermode InteractiveServer
@page "/DocIO"
@using System.IO;
@using Create_Word_document;
@inject Create_Word_document.Data.WordService service
@inject Microsoft.JSInterop.IJSRuntime JS

Step 4: Add a button to DocIO.razor.

Include the following code to create a new button that triggers document creation:

CSHTML

<h2>Syncfusion DocIO Library (Essential DocIO)</h2>
<p>The Syncfusion DocIO library (Essential DocIO) is a Blazor DocIO library used to create, read, edit, and convert Word files in applications without Microsoft Office dependencies.</p>
<button class="btn btn-primary" @onclick="@CreateWord">Create Word</button>

Step 5: Implement CreateWord method in DocIO.razor.

Add the following code to create and download the Word document:

C#

@code {
    MemoryStream documentStream;
    /// <summary>
    /// Creates and downloads the Word document.
    /// </summary>
    protected async void CreateWord()
    {
        documentStream = service.CreateWord();
        await JS.SaveAs("Sample.docx", documentStream.ToArray());
    }
}

Step 6: Create a new cs file WordService.cs in the Data folder.

Include the following namespaces in the file:

C#

using Syncfusion.DocIO;
using Syncfusion.DocIO.DLS;
using System.IO;

Step 7: Implement the CreateWord method in WordService.cs.

Create a new MemoryStream method named CreateWord in the WordService class, and include the following code snippet to create a simple Word document in Blazor Web App Server:

C#

public MemoryStream CreateWord()
{
    // Creating a new Word document
    WordDocument document = new WordDocument();
    // Adding a new section to the document
    WSection section = document.AddSection() as WSection;
    // Set Margin of the section
    section.PageSetup.Margins.All = 72;
    // Set page size of the section
    section.PageSetup.PageSize = new Syncfusion.Drawing.SizeF(612, 792);

    // Create Paragraph styles
    WParagraphStyle style = document.AddParagraphStyle("Normal") as WParagraphStyle;
    style.CharacterFormat.FontName = "Calibri";
    style.CharacterFormat.FontSize = 11f;
    style.ParagraphFormat.BeforeSpacing = 0;
    style.ParagraphFormat.AfterSpacing = 8;
    style.ParagraphFormat.LineSpacing = 13.8f;

    style = document.AddParagraphStyle("Heading 1") as WParagraphStyle;
    style.ApplyBaseStyle("Normal");
    style.CharacterFormat.FontName = "Calibri Light";
    style.CharacterFormat.FontSize = 16f;
    style.CharacterFormat.TextColor = Syncfusion.Drawing.Color.FromArgb(46, 116, 181);
    style.ParagraphFormat.BeforeSpacing = 12;
    style.ParagraphFormat.AfterSpacing = 0;
    style.ParagraphFormat.Keep = true;
    style.ParagraphFormat.KeepFollow = true;
    style.ParagraphFormat.OutlineLevel = OutlineLevel.Level1;

    IWParagraph paragraph = section.HeadersFooters.Header.AddParagraph();
    paragraph.ApplyStyle("Normal");
    paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Left;
    WTextRange textRange = paragraph.AppendText("Adventure Works Cycles") as WTextRange;
    textRange.CharacterFormat.FontSize = 12f;
    textRange.CharacterFormat.FontName = "Calibri";
    textRange.CharacterFormat.TextColor = Syncfusion.Drawing.Color.Red;

    // Appends paragraph
    paragraph = section.AddParagraph();
    paragraph.ApplyStyle("Heading 1");
    paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center;
    textRange = paragraph.AppendText("Adventure Works Cycles") as WTextRange;
    textRange.CharacterFormat.FontSize = 18f;
    textRange.CharacterFormat.FontName = "Calibri";

    // Appends paragraph
    paragraph = section.AddParagraph();
    paragraph.ParagraphFormat.FirstLineIndent = 36;
    paragraph.BreakCharacterFormat.FontSize = 12f;
    textRange = paragraph.AppendText("Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base.") as WTextRange;
    textRange.CharacterFormat.FontSize = 12f;

    // Appends paragraph
    paragraph = section.AddParagraph();
    paragraph.ParagraphFormat.FirstLineIndent = 36;
    paragraph.BreakCharacterFormat.FontSize = 12f;
    textRange = paragraph.AppendText("In 2000, AdventureWorks Cycles bought a small manufacturing plant, Importadores Neptuno, located in Mexico. Importadores Neptuno manufactures several critical subcomponents for the AdventureWorks Cycles product line. These subcomponents are shipped to the Bothell location for final product assembly. In 2001, Importadores Neptuno, became the sole manufacturer and distributor of the touring bicycle product group.") as WTextRange;
    textRange.CharacterFormat.FontSize = 12f;

    // Saves the Word document to MemoryStream
    MemoryStream stream = new MemoryStream();
    document.Save(stream, FormatType.Docx);
    // Closes the Word document
    document.Close();
    stream.Position = 0;
    return stream;
}

Step 8: Add the service in Program.cs.

Add the following line to the Program.cs file to register WordService as a scoped service in the Blazor application.

C#

builder.Services.AddScoped<Create_Word_document.Data.WordService>();

Step 9: Create FileUtils.cs for JavaScript interoperability.

Create a new class file named FileUtils in the project and add the following code to invoke the JavaScript action for file download in the browser.

C#

public static class FileUtils
{
    public static ValueTask<object> SaveAs(this IJSRuntime js, string filename, byte[] data)
       => js.InvokeAsync<object>(
            "saveAsFile",
            filename,
            Convert.ToBase64String(data));
}

Step 10: Add JavaScript function to App.razor.

Add the following JavaScript function in the App.razor file located in the Pages folder.

HTML

<script type="text/javascript">
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download document in Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

Step 11: Add navigation link.

Add the following code snippet to the Navigation menu’s Razor file in the Layout folder.

HTML

<div class="nav-item px-3">
    <NavLink class="nav-link" href="docio">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Create Word
    </NavLink>
</div>

Step 12: Build the project.

Click the Build button in the toolbar or press Ctrl+Shift+B to build the project.

Step 13: Run the project.

Click the Run button (green arrow) in the toolbar or press F5 to run the app.

A complete working sample is available on GitHub.

Upon executing the program, the Word document will be generated as follows:

Click here to explore the rich set of Syncfusion^® Word library (DocIO) features.

An online sample link to create a Word document in ASP.NET Core.

WASM Standalone Application

• Visual Studio
• Visual Studio Code
• JetBrains Rider

Prerequisites:

• Visual Studio 2022.
• Install .NET 8 SDK or later.

Step 1: Create a new C# Blazor WASM Standalone app project.

Select “Blazor WebAssembly Standalone App” from the template and click Next.

Step 2: Install the Syncfusion.DocIO.Net.Core NuGet package.

To create a Word document in a Blazor WASM Standalone app, install Syncfusion.DocIO.Net.Core into the Blazor project.

NOTE

Starting with v16.2.0.x, if Syncfusion^® assemblies are referenced from trial setup or from the NuGet feed, the “Syncfusion.Licensing” assembly reference must also be added and a license key included in projects. Refer to this link to know about registering Syncfusion^® license key in an application to use Syncfusion components.

Step 3: Create a Razor file named DocIO.razor in the Pages folder.

Add the following namespaces:

C#

@page "/DocIO"
@inject Microsoft.JSInterop.IJSRuntime JS
@using Syncfusion.DocIO
@using Syncfusion.DocIO.DLS
@using System.IO

Step 4: Add a button to DocIO.razor.

Add the following code to create a new button that triggers document creation:

CSHTML

<h2>Syncfusion DocIO Library (Essential DocIO)</h2>
<p>The Syncfusion Blazor DocIO library (Essential DocIO) is used to create, read, edit, and convert DocIO files in applications without Microsoft Office dependencies.</p>
<button class="btn btn-primary" @onclick="@CreateWord">Create Word</button>

Step 5: Implement CreateWord method in DocIO.razor.

Create a new async method named CreateWord and include the following code snippet to create a Word document in the Blazor WASM Standalone app.

C#

@functions {
    async void CreateWord()
    {
        // Creating a new Word document
        WordDocument document = new WordDocument();
        // Adding a new section to the document
        WSection section = document.AddSection() as WSection;
        // Set Margin of the section
        section.PageSetup.Margins.All = 72;
        // Set page size of the section
        section.PageSetup.PageSize = new Syncfusion.Drawing.SizeF(612, 792);

        // Create Paragraph styles
        WParagraphStyle style = document.AddParagraphStyle("Normal") as WParagraphStyle;
        style.CharacterFormat.FontName = "Calibri";
        style.CharacterFormat.FontSize = 11f;
        style.ParagraphFormat.BeforeSpacing = 0;
        style.ParagraphFormat.AfterSpacing = 8;
        style.ParagraphFormat.LineSpacing = 13.8f;

        style = document.AddParagraphStyle("Heading 1") as WParagraphStyle;
        style.ApplyBaseStyle("Normal");
        style.CharacterFormat.FontName = "Calibri Light";
        style.CharacterFormat.FontSize = 16f;
        style.CharacterFormat.TextColor = Syncfusion.Drawing.Color.FromArgb(46, 116, 181);
        style.ParagraphFormat.BeforeSpacing = 12;
        style.ParagraphFormat.AfterSpacing = 0;
        style.ParagraphFormat.Keep = true;
        style.ParagraphFormat.KeepFollow = true;
        style.ParagraphFormat.OutlineLevel = OutlineLevel.Level1;

        IWParagraph paragraph = section.HeadersFooters.Header.AddParagraph();
        paragraph.ApplyStyle("Normal");
        paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Left;
        WTextRange textRange = paragraph.AppendText("Adventure Works Cycles") as WTextRange;
        textRange.CharacterFormat.FontSize = 12f;
        textRange.CharacterFormat.FontName = "Calibri";
        textRange.CharacterFormat.TextColor = Syncfusion.Drawing.Color.Red;

        // Appends paragraph
        paragraph = section.AddParagraph();
        paragraph.ApplyStyle("Heading 1");
        paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center;
        textRange = paragraph.AppendText("Adventure Works Cycles") as WTextRange;
        textRange.CharacterFormat.FontSize = 18f;
        textRange.CharacterFormat.FontName = "Calibri";

        // Appends paragraph
        paragraph = section.AddParagraph();
        paragraph.ParagraphFormat.FirstLineIndent = 36;
        paragraph.BreakCharacterFormat.FontSize = 12f;
        textRange = paragraph.AppendText("Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base.") as WTextRange;
        textRange.CharacterFormat.FontSize = 12f;

        // Appends paragraph
        paragraph = section.AddParagraph();
        paragraph.ParagraphFormat.FirstLineIndent = 36;
        paragraph.BreakCharacterFormat.FontSize = 12f;
        textRange = paragraph.AppendText("In 2000, AdventureWorks Cycles bought a small manufacturing plant, Importadores Neptuno, located in Mexico. Importadores Neptuno manufactures several critical subcomponents for the AdventureWorks Cycles product line. These subcomponents are shipped to the Bothell location for final product assembly. In 2001, Importadores Neptuno, became the sole manufacturer and distributor of the touring bicycle product group.") as WTextRange;
        textRange.CharacterFormat.FontSize = 12f;

        // Saves the Word document to MemoryStream
        MemoryStream stream = new MemoryStream();
        document.Save(stream, FormatType.Docx);
        // Closes the Word document
        document.Close();
        stream.Position = 0;
        // Download the Word document in the browser
        JS.SaveAs("Sample.docx", stream.ToArray());
    }
}

Step 6: Create FileUtils.cs for JavaScript interoperability.

Create a class file named FileUtils and add the following code to invoke the JavaScript action for file download in the browser.

C#

public static class FileUtils
{
    public static ValueTask<object> SaveAs(this IJSRuntime js, string filename, byte[] data)
       => js.InvokeAsync<object>(
            "saveAsFile",
            filename,
            Convert.ToBase64String(data));
}

Step 7: Add JavaScript function to index.html.

Add the following JavaScript function in the index.html file present under wwwroot.

HTML

<script type="text/javascript">
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download document in Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

Step 8: Add navigation link.

Add the following code snippet to the Navigation menu’s Razor file in the Layout folder.

HTML

<div class="nav-item px-3">
    <NavLink class="nav-link" href="docio">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Create Word
    </NavLink>
</div>

Step 9: Build the project.

Click on Build → Build Solution or press Ctrl+Shift+B to build the project.

Step 10: Run the project.

Click the Start button (green arrow) or press F5 to run the application.

A complete working sample is available on GitHub.

Upon executing the program, the Word document will be generated as follows:

NOTE

While the Word library functions in WASM Standalone, server-side deployment is recommended. WASM Standalone deployment increases the application payload size.

Prerequisites:

• Visual Studio Code.
• Install .NET 8 SDK or later.
• Open Visual Studio Code and install the C# for Visual Studio Code extension from the Extensions Marketplace.

Step 1: Create a new C# Blazor WASM Standalone app project.

• Open the command palette by pressing Ctrl+Shift+P and type .NET:New Project and enter.
• Choose the Blazor WebAssembly Standalone App template.

• Select the project location, type the project name and press enter.
• Then choose Create project.

Step 2: To create a Word document in Blazor WASM Standalone app, install Syncfusion.DocIO.Net.Core to the Blazor project.

• Press Ctrl + ` (backtick) to open the integrated terminal in Visual Studio Code.
• Ensure you’re in the project root directory where your .csproj file is located.
• Run the command dotnet add package Syncfusion.DocIO.Net.Core to install the NuGet package.

NOTE

Starting with v16.2.0.x, if Syncfusion^® assemblies are referenced from trial setup or from the NuGet feed, the “Syncfusion.Licensing” assembly reference must also be added and a license key included in projects. Refer to this link to know about registering Syncfusion^® license key in an application to use Syncfusion components.

Step 3: Create a Razor file named DocIO.razor in the Pages folder.

Add the following namespaces:

C#

@page "/DocIO"
@inject Microsoft.JSInterop.IJSRuntime JS
@using Syncfusion.DocIO
@using Syncfusion.DocIO.DLS
@using System.IO

Step 4: Add a button to DocIO.razor.

Add the following code to create a new button that triggers document creation:

CSHTML

<h2>Syncfusion DocIO Library (Essential DocIO)</h2>
<p>The Syncfusion Blazor DocIO library (Essential DocIO) is used to create, read, edit, and convert DocIO files in applications without Microsoft Office dependencies.</p>
<button class="btn btn-primary" @onclick="@CreateWord">Create Word</button>

Step 5: Implement CreateWord method in DocIO.razor.

Create a new async method named CreateWord and include the following code snippet to create a Word document in the Blazor WASM Standalone app.

C#

@functions {
    async void CreateWord()
    {
        // Creating a new Word document
        WordDocument document = new WordDocument();
        // Adding a new section to the document
        WSection section = document.AddSection() as WSection;
        // Set Margin of the section
        section.PageSetup.Margins.All = 72;
        // Set page size of the section
        section.PageSetup.PageSize = new Syncfusion.Drawing.SizeF(612, 792);

        // Create Paragraph styles
        WParagraphStyle style = document.AddParagraphStyle("Normal") as WParagraphStyle;
        style.CharacterFormat.FontName = "Calibri";
        style.CharacterFormat.FontSize = 11f;
        style.ParagraphFormat.BeforeSpacing = 0;
        style.ParagraphFormat.AfterSpacing = 8;
        style.ParagraphFormat.LineSpacing = 13.8f;

        style = document.AddParagraphStyle("Heading 1") as WParagraphStyle;
        style.ApplyBaseStyle("Normal");
        style.CharacterFormat.FontName = "Calibri Light";
        style.CharacterFormat.FontSize = 16f;
        style.CharacterFormat.TextColor = Syncfusion.Drawing.Color.FromArgb(46, 116, 181);
        style.ParagraphFormat.BeforeSpacing = 12;
        style.ParagraphFormat.AfterSpacing = 0;
        style.ParagraphFormat.Keep = true;
        style.ParagraphFormat.KeepFollow = true;
        style.ParagraphFormat.OutlineLevel = OutlineLevel.Level1;

        IWParagraph paragraph = section.HeadersFooters.Header.AddParagraph();
        paragraph.ApplyStyle("Normal");
        paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Left;
        WTextRange textRange = paragraph.AppendText("Adventure Works Cycles") as WTextRange;
        textRange.CharacterFormat.FontSize = 12f;
        textRange.CharacterFormat.FontName = "Calibri";
        textRange.CharacterFormat.TextColor = Syncfusion.Drawing.Color.Red;

        // Appends paragraph
        paragraph = section.AddParagraph();
        paragraph.ApplyStyle("Heading 1");
        paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center;
        textRange = paragraph.AppendText("Adventure Works Cycles") as WTextRange;
        textRange.CharacterFormat.FontSize = 18f;
        textRange.CharacterFormat.FontName = "Calibri";

        // Appends paragraph
        paragraph = section.AddParagraph();
        paragraph.ParagraphFormat.FirstLineIndent = 36;
        paragraph.BreakCharacterFormat.FontSize = 12f;
        textRange = paragraph.AppendText("Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base.") as WTextRange;
        textRange.CharacterFormat.FontSize = 12f;

        // Appends paragraph
        paragraph = section.AddParagraph();
        paragraph.ParagraphFormat.FirstLineIndent = 36;
        paragraph.BreakCharacterFormat.FontSize = 12f;
        textRange = paragraph.AppendText("In 2000, AdventureWorks Cycles bought a small manufacturing plant, Importadores Neptuno, located in Mexico. Importadores Neptuno manufactures several critical subcomponents for the AdventureWorks Cycles product line. These subcomponents are shipped to the Bothell location for final product assembly. In 2001, Importadores Neptuno, became the sole manufacturer and distributor of the touring bicycle product group.") as WTextRange;
        textRange.CharacterFormat.FontSize = 12f;

        // Saves the Word document to MemoryStream
        MemoryStream stream = new MemoryStream();
        document.Save(stream, FormatType.Docx);
        // Closes the Word document
        document.Close();
        stream.Position = 0;
        // Download the Word document in the browser
        JS.SaveAs("Sample.docx", stream.ToArray());
    }
}

Step 6: Create FileUtils.cs for JavaScript interoperability.

Create a class file named FileUtils and add the following code to invoke the JavaScript action for file download in the browser.

C#

public static class FileUtils
{
    public static ValueTask<object> SaveAs(this IJSRuntime js, string filename, byte[] data)
       => js.InvokeAsync<object>(
            "saveAsFile",
            filename,
            Convert.ToBase64String(data));
}

Step 7: Add JavaScript function to index.html.

Add the following JavaScript function in the index.html file present under wwwroot.

HTML

<script type="text/javascript">
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download document in Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

Step 8: Add navigation link.

Add the following code snippet to the Navigation menu’s Razor file in the Layout folder.

HTML

<div class="nav-item px-3">
    <NavLink class="nav-link" href="docio">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Create Word
    </NavLink>
</div>

Step 9: Build the project.

Run the following command in terminal to build the project.

dotnet build

Step 10: Run the project.

Run the following command in terminal to run the project.

dotnet run

A complete working sample is available on GitHub.

Upon executing the program, the Word document will be generated as follows:

NOTE

While the Word library functions in WASM Standalone, server-side deployment is recommended. WASM Standalone deployment increases the application payload size.

Prerequisites:

• JetBrains Rider.
• Install .NET 8 SDK or later.

Step 1. Open JetBrains Rider and create a new Blazor WASM Standalone app project.

• Launch JetBrains Rider.
• Click new solution on the welcome screen.

• In the new Solution dialog, select Project Type as Web.
• Select the target framework (e.g., .NET 8.0, .NET 9.0).
• Choose template as Blazor WebAssembly Standalone App.
• Enter a project name and specify the location.
• Click create.

Step 2: Install the NuGet package from NuGet.org.

• Click the NuGet icon in the Rider toolbar and type Syncfusion.DocIO.Net.Core in the search bar.
• Ensure that “nuget.org” is selected as the package source.
• Select the latest Syncfusion.DocIO.Net.Core NuGet package from the list.
• Click the + (Add) button to add the package.

• Click the Install button to complete the installation.

NOTE

Starting with v16.2.0.x, if Syncfusion^® assemblies are referenced from trial setup or from the NuGet feed, the “Syncfusion.Licensing” assembly reference must also be added and a license key included in projects. Refer to this link to know about registering Syncfusion^® license key in an application to use Syncfusion components.

Step 3: Create a Razor file named DocIO.razor in the Pages folder.

Add the following namespaces:

C#

@page "/DocIO"
@inject Microsoft.JSInterop.IJSRuntime JS
@using Syncfusion.DocIO
@using Syncfusion.DocIO.DLS
@using System.IO

Step 4: Add a button to DocIO.razor.

Add the following code to create a new button that triggers document creation:

CSHTML

<h2>Syncfusion DocIO Library (Essential DocIO)</h2>
<p>The Syncfusion Blazor DocIO library (Essential DocIO) is used to create, read, edit, and convert DocIO files in applications without Microsoft Office dependencies.</p>
<button class="btn btn-primary" @onclick="@CreateWord">Create Word</button>

Step 5: Implement CreateWord method in DocIO.razor.

Create a new async method named CreateWord and include the following code snippet to create a Word document in the Blazor WASM Standalone app.

C#

@functions {
    async void CreateWord()
    {
        // Creating a new Word document
        WordDocument document = new WordDocument();
        // Adding a new section to the document
        WSection section = document.AddSection() as WSection;
        // Set Margin of the section
        section.PageSetup.Margins.All = 72;
        // Set page size of the section
        section.PageSetup.PageSize = new Syncfusion.Drawing.SizeF(612, 792);

        // Create Paragraph styles
        WParagraphStyle style = document.AddParagraphStyle("Normal") as WParagraphStyle;
        style.CharacterFormat.FontName = "Calibri";
        style.CharacterFormat.FontSize = 11f;
        style.ParagraphFormat.BeforeSpacing = 0;
        style.ParagraphFormat.AfterSpacing = 8;
        style.ParagraphFormat.LineSpacing = 13.8f;

        style = document.AddParagraphStyle("Heading 1") as WParagraphStyle;
        style.ApplyBaseStyle("Normal");
        style.CharacterFormat.FontName = "Calibri Light";
        style.CharacterFormat.FontSize = 16f;
        style.CharacterFormat.TextColor = Syncfusion.Drawing.Color.FromArgb(46, 116, 181);
        style.ParagraphFormat.BeforeSpacing = 12;
        style.ParagraphFormat.AfterSpacing = 0;
        style.ParagraphFormat.Keep = true;
        style.ParagraphFormat.KeepFollow = true;
        style.ParagraphFormat.OutlineLevel = OutlineLevel.Level1;

        IWParagraph paragraph = section.HeadersFooters.Header.AddParagraph();
        paragraph.ApplyStyle("Normal");
        paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Left;
        WTextRange textRange = paragraph.AppendText("Adventure Works Cycles") as WTextRange;
        textRange.CharacterFormat.FontSize = 12f;
        textRange.CharacterFormat.FontName = "Calibri";
        textRange.CharacterFormat.TextColor = Syncfusion.Drawing.Color.Red;

        // Appends paragraph
        paragraph = section.AddParagraph();
        paragraph.ApplyStyle("Heading 1");
        paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center;
        textRange = paragraph.AppendText("Adventure Works Cycles") as WTextRange;
        textRange.CharacterFormat.FontSize = 18f;
        textRange.CharacterFormat.FontName = "Calibri";

        // Appends paragraph
        paragraph = section.AddParagraph();
        paragraph.ParagraphFormat.FirstLineIndent = 36;
        paragraph.BreakCharacterFormat.FontSize = 12f;
        textRange = paragraph.AppendText("Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base.") as WTextRange;
        textRange.CharacterFormat.FontSize = 12f;

        // Appends paragraph
        paragraph = section.AddParagraph();
        paragraph.ParagraphFormat.FirstLineIndent = 36;
        paragraph.BreakCharacterFormat.FontSize = 12f;
        textRange = paragraph.AppendText("In 2000, AdventureWorks Cycles bought a small manufacturing plant, Importadores Neptuno, located in Mexico. Importadores Neptuno manufactures several critical subcomponents for the AdventureWorks Cycles product line. These subcomponents are shipped to the Bothell location for final product assembly. In 2001, Importadores Neptuno, became the sole manufacturer and distributor of the touring bicycle product group.") as WTextRange;
        textRange.CharacterFormat.FontSize = 12f;

        // Saves the Word document to MemoryStream
        MemoryStream stream = new MemoryStream();
        document.Save(stream, FormatType.Docx);
        // Closes the Word document
        document.Close();
        stream.Position = 0;
        // Download the Word document in the browser
        JS.SaveAs("Sample.docx", stream.ToArray());
    }
}

Step 6: Create FileUtils.cs for JavaScript interoperability.

Create a class file named FileUtils and add the following code to invoke the JavaScript action for file download in the browser.

C#

public static class FileUtils
{
    public static ValueTask<object> SaveAs(this IJSRuntime js, string filename, byte[] data)
       => js.InvokeAsync<object>(
            "saveAsFile",
            filename,
            Convert.ToBase64String(data));
}

Step 7: Add JavaScript function to index.html.

Add the following JavaScript function in the index.html file present under wwwroot.

HTML

<script type="text/javascript">
    function saveAsFile(filename, bytesBase64) {
        if (navigator.msSaveBlob) {
            // Download document in Edge browser
            var data = window.atob(bytesBase64);
            var bytes = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                bytes[i] = data.charCodeAt(i);
            }
            var blob = new Blob([bytes.buffer], { type: "application/octet-stream" });
            navigator.msSaveBlob(blob, filename);
        }
        else {
            var link = document.createElement('a');
            link.download = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
            link.click();
            document.body.removeChild(link);
        }
    }
</script>

Step 8: Add navigation link.

Add the following code snippet to the Navigation menu’s Razor file in the Layout folder.

HTML

<div class="nav-item px-3">
    <NavLink class="nav-link" href="docio">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Create Word
    </NavLink>
</div>

Step 9: Build the project.

Click the Build button in the toolbar or press Ctrl+Shift+B to build the project.

Step 10: Run the project.

Click the Run button (green arrow) in the toolbar or press F5 to run the app.

A complete working sample is available on GitHub.

Upon executing the program, the Word document will be generated as follows:

NOTE

While the Word library functions in WASM Standalone, server-side deployment is recommended. WASM Standalone deployment increases the application payload size.

Kindly explore the supported and unsupported features of the Word library in Blazor.

Click here to explore the rich set of Syncfusion^® Word library (DocIO) features.

An online sample link to create a Word document in ASP.NET Core.