Open and save Word document in Blazor

4 Feb 202515 minutes to read

Syncfusion^® 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, you can open and save a Word document in Blazor.

Prerequisites:

Visual Studio 2019 Preview
Install the .NET Core SDK 3.1 Preview or Greater

Server app

Step 1: Create a new C# Blazor Server app project. Select Blazor Server App from the template and click the Next button.

Create Blazor Server application in Visual Studio

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

Install Syncfusion.DocIO.Net.Core NuGet Package

NOTE

Starting with v16.2.0.x, if you reference Syncfusion^® assemblies from trial setup or from the NuGet feed, you also have to add “Syncfusion.Licensing” assembly reference and include a license key in your projects. Please refer to this link to know about registering Syncfusion^® license key in your application to use our components.

Step 3: Create a razor file with name as DocIO under Pages folder and include the following namespaces in the file.

C#
@page "/DocIO"
@using System.IO;
@using Open_and_save_Word_document;
@inject Open_and_save_Word_document.Data.WordService service
@inject Microsoft.JSInterop.IJSRuntime JS

Step 4: Add the following code in DocIO.razor file to create a new button.

CSHTML
<h2>Syncfusion DocIO library (DocIO)</h2>
<p>Syncfusion DocIO library (DocIO) is a Blazor DocIO library used to create, read, edit, and convert Word files in your applications without Microsoft Office dependencies.</p>
<button class="btn btn-primary" @onclick="@OpenAndSaveDocument">Open and save Document</button>

Step 5: Add the following code snippet in DocIO.razor file to open and save Word document and download it.

C#
@code {
    MemoryStream documentStream;
    /// <summary>
    /// Open and save the Word document and download it
    /// </summary>
    protected async void OpenAndSaveDocument()
    {
        documentStream = service.OpenAndSaveDocument();
        await JS.SaveAs("Sample.docx", documentStream.ToArray());
    }
}

Step 6: Create a new cs file with name as WordService under Data folder and include the following namespaces in the file.

C#
using Syncfusion.DocIO;
using Syncfusion.DocIO.DLS;

Step 7: Create a new MemoryStream method with name as OpenAndSaveDocument in WordService class and include the following code snippet to open an existing Word document in Blazor Server app.

C#
public MemoryStream OpenAndSaveDocument()
{
    using (FileStream sourceStreamPath = new FileStream("Input.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite))
    {
        //Open an existing Word document.
        using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Docx))
    }
}

Step 8: Add below code example to add a paragraph in the Word document.

C#
//Access the section in a Word document.
IWSection section = document.Sections[0];
//Add a new paragraph to the section.
IWParagraph paragraph = section.AddParagraph();
paragraph.ParagraphFormat.FirstLineIndent = 36;
paragraph.BreakCharacterFormat.FontSize = 12f;
IWTextRange text = paragraph.AppendText("In 2000, Adventure Works Cycles bought a small manufacturing plant, Importadores Neptuno, located in Mexico. Importadores Neptuno manufactures several critical subcomponents for the Adventure Works 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.");
text.CharacterFormat.FontSize = 12f;

Step 9: Add below code example to save the Word document in Blazor.

C#
//Save the Word document to MemoryStream.
MemoryStream stream = new MemoryStream();
document.Save(stream, FormatType.Docx);
stream.Position = 0;
return stream;

Step 10: Create a new class file in the project, with name as FileUtils and add the following code to invoke the JavaScript action to download the file 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 11: Add the following JavaScript function in the _Host.cshtml 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 12: Add the following code snippet in the razor file of Navigation menu in the Shared folder.

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

You can download a complete working sample from GitHub.

By executing the program, you will get the Word document as follows.

Blazor Server output Word document

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

WASM app

Step 1: Create a new C# Blazor WASM app project. Select Blazor WebAssembly App from the template and click the Next button.

Create Blazor WebAssembly application in Visual Studio

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

Install Syncfusion.DocIO.Net.Core NuGet Package

NOTE

Starting with v16.2.0.x, if you reference Syncfusion^® assemblies from trial setup or from the NuGet feed, you also have to add “Syncfusion.Licensing” assembly reference and include a license key in your projects. Please refer to this link to know about registering Syncfusion^® license key in your application to use our components.

Step 3: Create a razor file with name as DocIO under Pages folder and add the following namespaces in the file.

C#
@page "/DocIO"
@using Syncfusion.DocIO
@using Syncfusion.DocIO.DLS

Step 4: Add the following code to create a new button.

CSHTML
<h2>Syncfusion DocIO library (DocIO)</h2>
<p>Syncfusion Blazor DocIO library (DocIO) used to create, read, edit, and convert DocIO files in your applications without Microsoft Office dependencies.</p>
<button class="btn btn-primary" @onclick="@OpenAndSaveWordDocument">Open and save Document</button>

Step 5: Create a new async method with name as OpenAndSaveDocument and include the following code snippet to open an existing Word document in Blazor WASM app.

C#
@functions {
    async void OpenAndSaveDocument()
    {
        using (Stream inputStream = await client.GetStreamAsync("Input.docx"))
        {
            //Open an existing Word document.
            using (WordDocument document = new WordDocument(inputStream, FormatType.Docx))
        }
    }

Step 6: Add below code example to add a paragraph in the Word document.

C#
//Access the section in a Word document.
IWSection section = document.Sections[0];
//Add a new paragraph to the section.
IWParagraph paragraph = section.AddParagraph();
paragraph.ParagraphFormat.FirstLineIndent = 36;
paragraph.BreakCharacterFormat.FontSize = 12f;
IWTextRange text = paragraph.AppendText("In 2000, Adventure Works Cycles bought a small manufacturing plant, Importadores Neptuno, located in Mexico. Importadores Neptuno manufactures several critical subcomponents for the Adventure Works 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.");
text.CharacterFormat.FontSize = 12f;

Step 7: Add below code example to save the Word document in Blazor.

C#
//Save the Word document to MemoryStream.
using (MemoryStream stream = new MemoryStream())
{
    document.Save(stream, FormatType.Docx);
    stream.Position = 0;
    //Download the Word document in the browser.
    await JS.SaveAs("Sample.docx", stream.ToArray());
}

Step 8: Create a class file with FileUtils name and add the following code to invoke the JavaScript action to download the file 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 9: 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 10: Add the following code snippet in the razor file of Navigation menu in the Shared folder.

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

You can download a complete working sample from GitHub.

By executing the program, you will get the Word document as follows.

Blazor WASM output Word document

NOTE

Even though Word library works in WASM app, it is recommended to use server deployment. Since the WASM app deployment increases the application payload size.

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

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