Convert Word Document to PDF in Blazor

24 Jul 202624 minutes to read

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

Word to PDF in Blazor Web App Server Application

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.

Create Blazor Web App application in Visual Studio

  • Name the project and click Next.

Name the Blazor Web App in Visual Studio

  • On the Additional information screen, set Interactive render mode to Server, ensure Include sample pages is checked (this creates the Components/Pages folder), and click Create.

Select the framework in Blazor Web App Server in Visual Studio

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

To convert a Word document to PDF in a Blazor Web App Server, install Syncfusion.DocIORenderer.Net.Core into the Blazor project.

Install Syncfusion.DocIORenderer.Net.Core NuGet Package

NOTE

  1. If deploying the application in a Linux environment, refer to the documentation for the required additional NuGet packages.
  2. 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 (Components/Pages/DocIO.razor).

NOTE

The @rendermode InteractiveServer directive requires that the <Routes> component in App.razor be updated to <Routes @rendermode="InteractiveServer" /> so the interactive rendering mode is available to pages.

Include the following namespaces in the file:

@rendermode InteractiveServer
@page "/docio"
@using System.IO
@using Convert_Word_Document_to_PDF
@using Convert_Word_Document_to_PDF.Data
@using Microsoft.JSInterop
@inject Convert_Word_Document_to_PDF.Data.WordService service
@inject IJSRuntime JS

Step 4: Add a button to DocIO.razor.

Include the following code to create a new button that triggers the Word to PDF conversion:

<h2>Syncfusion DocIO Library </h2>
<p>The Syncfusion DocIO library 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="@ConvertWordtoPDF">Convert Word to PDF</button>

Step 5: Implement the method in DocIO.razor.

Add the following code to convert the Word document to PDF and download it:

@code {
    MemoryStream documentStream;
    /// <summary>
    /// Converts Word to PDF and downloads the PDF document.
    /// </summary>
    protected async void ConvertWordtoPDF()
    {
        documentStream = service.ConvertWordtoPDF();
        await JS.SaveAs("Sample.pdf", documentStream.ToArray());
    }
}

Step 6: Create the Data folder and a new C# file WordService.cs inside it (Data/WordService.cs). The Data folder does not exist by default in the Blazor Web App template, so create it first (right-click the project → AddNew Folder → name it Data).

Include the following code in WordService.cs. This adds the required using directives, the namespace, and the class wrapper used to convert the Word document at wwwroot/Template.docx to a PDF:

namespace Convert_Word_Document_to_PDF.Data
{
    public class WordService
    {
        public MemoryStream ConvertWordtoPDF()
        {
            //Open the file as Stream
            using (FileStream sourceStreamPath = new FileStream(@"wwwroot/Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite))
            {
                //Open an existing Word document.
                using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Automatic))
                {
                    //Instantiation of DocIORenderer for Word to PDF conversion
                    using (DocIORenderer render = new DocIORenderer())
                    {
                        //Converts Word document into PDF document
                        using (PdfDocument pdfDocument = render.ConvertToPDF(document))
                        {
                            //Saves the PDF document to MemoryStream.
                            MemoryStream stream = new MemoryStream();
                            pdfDocument.Save(stream);
                            stream.Position = 0;
                            return stream;
                        }
                    }
                }
            }                                           
        }
    }
}

Step 7: 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.

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

Step 8: Create FileUtils.cs for JavaScript interoperability.

Create a new class file named FileUtils.cs at the project root and add the following code (including the required using directives and namespace) to invoke the JavaScript action for file download in the browser:

namespace Convert_Word_Document_to_PDF
{
    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 JavaScript function to App.razor.

Add the following JavaScript function in the App.razor file located in the Components folder (Components/App.razor). If App.razor already contains a <script> block, merge the function into it; otherwise add a new <script> block inside the <head> element.

<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 navigation link.

Add the following code snippet to the navigation menu’s Razor file located at Components/Layout/NavMenu.razor. Ensure the href value matches the @page route defined in DocIO.razor:

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

Step 11: Build the project.

Set the Blazor Server project as the startup project (right-click the project in Solution ExplorerSet as Startup Project). Then click BuildBuild Solution or press Ctrl+Shift+B to build the project. Fix any build errors before continuing.

Step 12: Run the project.

Click the Start button (green arrow) or press F5 to run the application. Once the app is running, open https://localhost:<port>/docio in the browser and click the Convert Word to PDF button. The converted Sample.pdf will be downloaded by the browser.

A complete working sample is available on GitHub.

Upon executing the program, the PDF document will be generated as follows.

Word to PDF in Blazor Web App Server

Prerequisites:

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 (requires .NET 8+; select the Server interactivity option).

Choose Blazor Web App Server from template

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

Step 2: To convert a Word document to PDF in Web app, install the following NuGet packages 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 following commands to install the required NuGet packages:
dotnet add package Syncfusion.DocIORenderer.Net.Core

Add Syncfusion.DocIORenderer.Net.Core NuGet package

NOTE

  1. If deploying the application in a Linux environment, refer to the documentation for the required additional NuGet packages (such as SkiaSharp.NativeAssets.Linux).
  2. 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:

@rendermode InteractiveServer
@page "/docio"
@using System.IO;
@using Convert_Word_Document_to_PDF;
@using Convert_Word_Document_to_PDF.Helpers;
@inject Convert_Word_Document_to_PDF.Data.WordService service
@inject Microsoft.JSInterop.IJSRuntime JS

Note: The @rendermode InteractiveServer directive requires that the <Routes> component in App.razor be updated to <Routes @rendermode="InteractiveServer" /> so the interactive rendering mode is available to pages.

Step 4: Add a button to DocIO.razor.

Include the following code to create a new button that triggers the Word to PDF conversion:

<h2>Syncfusion DocIO Library </h2>
<p>The Syncfusion DocIO library 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="@ConvertWordtoPDF">Convert Word to PDF</button>

Step 5: Implement the method in DocIO.razor.

Add the following code to convert the Word document to PDF and download it:

@code {
    MemoryStream documentStream;
    /// <summary>
    /// Converts Word to PDF and downloads the PDF document.
    /// </summary>
    protected async void ConvertWordtoPDF()
    {
        documentStream = service.ConvertWordtoPDF();
        await JS.SaveAs("Sample.pdf", documentStream.ToArray());
    }
}

Step 6: Create the Data folder and a new C# file WordService.cs inside it (Data/WordService.cs). The Data folder does not exist by default in the Blazor Web App template, so create it first (right-click the project → AddNew Folder → name it Data).

Include the following code in WordService.cs. This adds the required using directives, the namespace, and the class wrapper used to convert the Word document at wwwroot/Template.docx to a PDF:

namespace Convert_Word_Document_to_PDF.Data
{
    public class WordService
    {
        public MemoryStream ConvertWordtoPDF()
        {
            //Open the file as Stream
            using (FileStream sourceStreamPath = new FileStream(@"wwwroot/Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite))
            {
                //Open an existing Word document.
                using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Automatic))
                {
                    //Instantiation of DocIORenderer for Word to PDF conversion
                    using (DocIORenderer render = new DocIORenderer())
                    {
                        //Converts Word document into PDF document
                        using (PdfDocument pdfDocument = render.ConvertToPDF(document))
                        {
                            //Saves the PDF document to MemoryStream.
                            MemoryStream stream = new MemoryStream();
                            pdfDocument.Save(stream);
                            stream.Position = 0;
                            return stream;
                        }
                    }
                }
            }                                           
        }
    }
}

Step 7: 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.

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

Note: Replace Convert_Word_Document_to_PDF with the actual project namespace you used when creating the Blazor project.

Step 8: Create FileUtils.cs for JavaScript interoperability.

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

using System;
using System.Threading.Tasks;
using Microsoft.JSInterop;

namespace Convert_Word_Document_to_PDF.Helpers
{
    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 JavaScript function to App.razor.

Add the following JavaScript function in the App.razor file located in the Components folder (Components/App.razor). Place the <script> block just before the closing </body> tag so the saveAsFile function is available when the download is triggered.

<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 navigation link.

Add the following code snippet to the NavMenu.razor file in the Layout folder. Ensure the href value matches the @page route defined in DocIO.razor.

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

Step 11: Build the project.

Run the following command in terminal to build the project.

dotnet build

Step 12: Run the project.

Run the following command in terminal to run the project.

dotnet run

Once the app starts, open a browser and navigate to the URL shown in the terminal output (typically https://localhost:5001 or https://localhost:7xxx). Then click the Convert Word to PDF button in the navigation menu to download the generated PDF.

A complete working sample is available on GitHub.

Upon executing the program, the PDF document will be generated as follows.

Word to PDF in Blazor Web App Server

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.

Launch JetBrains Rider

  • 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.
  • Set Authentication type to None (unless you specifically need a different option).
  • Ensure Interactive render mode is set to Server so that the @rendermode InteractiveServer directive used later in this guide works without additional configuration.
  • Enter a project name (for example, Convert_Word_Document_to_PDF) and specify the location.
  • Click create.

Creating a new .NET Core console application in JetBrains Rider

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

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

Select the Syncfusion.DocIORenderer.Net.Core NuGet package

  • Click the Install button to complete the installation.

Install the Syncfusion.DocIORenderer.Net.Core NuGet package

NOTE

  1. If deploying the application in a Linux environment, refer to the documentation for the required additional NuGet packages.
  2. 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 (Components/Pages/DocIO.razor).

Include the following namespaces in the file. Replace Convert_Word_Document_to_PDF with the actual project name you provided in Step 1:

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

NOTE

Ensure that the project is configured with Interactive Server render mode (selected in Step 1) so that the @rendermode InteractiveServer directive works without any additional configuration.

Step 4: Add a button to DocIO.razor.

Include the following code to create a new button that triggers the Word to PDF conversion:

<h2>Syncfusion DocIO Library </h2>
<p>The Syncfusion DocIO library 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="@ConvertWordtoPDF">Convert Word to PDF</button>

Step 5: Implement the method in DocIO.razor.

Add the following code to convert the Word document to PDF and download it:

@code {
    MemoryStream documentStream;
    /// <summary>
    /// Converts Word to PDF and downloads the PDF document.
    /// </summary>
    protected async void ConvertWordtoPDF()
    {
        documentStream = service.ConvertWordtoPDF();
        await JS.SaveAs("Sample.pdf", documentStream.ToArray());
    }
}

Step 6: Create the Data folder and a new C# file WordService.cs inside it (Data/WordService.cs). The Data folder does not exist by default in the Blazor Web App template, so create it first (right-click the project → AddNew Folder → name it Data).

Include the following code in WordService.cs. This adds the required using directives, the namespace, and the class wrapper used to convert the Word document at wwwroot/Template.docx to a PDF:

namespace Convert_Word_Document_to_PDF.Data
{
    public class WordService
    {
        public MemoryStream ConvertWordtoPDF()
        {
            //Open the file as Stream
            using (FileStream sourceStreamPath = new FileStream(@"wwwroot/Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite))
            {
                //Open an existing Word document.
                using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Automatic))
                {
                    //Instantiation of DocIORenderer for Word to PDF conversion
                    using (DocIORenderer render = new DocIORenderer())
                    {
                        //Converts Word document into PDF document
                        using (PdfDocument pdfDocument = render.ConvertToPDF(document))
                        {
                            //Saves the PDF document to MemoryStream.
                            MemoryStream stream = new MemoryStream();
                            pdfDocument.Save(stream);
                            stream.Position = 0;
                            return stream;
                        }
                    }
                }
            }                                           
        }
    }
}

Step 7: 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.

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

Step 8: Create FileUtils.cs for JavaScript interoperability.

Right-click the project in the Solution Explorer, choose Add -> Class, and create a new class file named FileUtils.cs in the project root. Add the following complete code to the file to invoke the JavaScript action for file download in the browser.

using System;
using System.Threading.Tasks;
using Microsoft.JSInterop;

namespace Convert_Word_Document_to_PDF
{
    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 JavaScript function to App.razor.

Add the following JavaScript function in the App.razor file located in the Components folder (Components/App.razor). Place the <script> block just before the closing </body> tag so the saveAsFile function is available when the download is triggered.

<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 navigation link.

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

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

A complete working sample is available on GitHub.

Upon executing the program, the PDF document will be generated as follows.

Word to PDF in Blazor Web App Server

Looking for the full .NET Word Library overview, features, pricing, and documentation? Visit the .NET Word Library page.

An online sample link to convert Word document to PDF in ASP.NET Core.

Word to PDF in Blazor WASM Standalone Application

Prerequisites:

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

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

Create Blazor WebAssembly Standalone application in  Visual Studio

Step 2: Install the following NuGet packages in the application from NuGet.org.

Install Syncfusion.DocIORenderer.Net.Core NuGet Package Install SkiaSharp.Views.Blazor v3.119.1 NuGet Package

NOTE

  1. If deploying the application in a Linux environment, refer to the documentation for the required additional NuGet packages.
  2. 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 and the required @code block to the file.

@page "/docio"
@using Syncfusion.DocIO
@using Syncfusion.Pdf
@using Syncfusion.DocIORenderer
@using Syncfusion.DocIO.DLS
@inject Microsoft.JSInterop.IJSRuntime JS
@inject HttpClient client

Step 4: Add a button to DocIO.razor.

Include the following code to create a new button that triggers the Word to PDF conversion:

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

Step 5: Implement WordToPDF method in DocIO.razor.

Add the following code inside an @code { } block in DocIO.razor to open and convert an existing Word document in the Blazor WebAssembly Standalone app:

private async Task WordToPDF()
{
    try
    {
        using (Stream inputStream = await client.GetStreamAsync("sample-data/Input.docx"))
        {
            // Open an existing Word document.
            using (WordDocument document = new WordDocument(inputStream, FormatType.Docx))
            {
                // Initialize the DocIORenderer for Word to PDF conversion.
                using (DocIORenderer render = new DocIORenderer())
                {
                    // Convert Word document into PDF document.
                    using (PdfDocument pdfDocument = render.ConvertToPDF(document))
                    {
                        // Save the PDF document to MemoryStream.
                        using (MemoryStream outputStream = new MemoryStream())
                        {
                            pdfDocument.Save(outputStream);
                            outputStream.Position = 0;
                            // Download PDF file in the browser.
                            await JS.SaveAs("Output.pdf", outputStream.ToArray());
                        }
                    }
                }
            }
        }
    }
}

Step 6: Create FileUtils.cs for JavaScript interoperability.

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

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.

<script>
    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.

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

Step 9: Build the project.

Click on BuildBuild 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. After the app loads, navigate to **https://localhost:/docio** in the browser to test the conversion.

A complete working sample is available on GitHub.

Upon executing the program, the PDF document will be generated as follows.

Word to PDF in Blazor WASM Standalone app

NOTE

To convert Word to PDF, it is necessary to access the font stream internally. However, this cannot be done automatically in a Blazor WASM Standalone application. Therefore, it is recommended to use a Web app Server, even though Word to PDF conversion works in a WASM Standalone app.

Prerequisites:

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

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

Choose Blazor Web app from template

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

Step 2: To convert a Word document to PDF in the Blazor WebAssembly Standalone app, install Syncfusion.DocIORenderer.Net.Core and SkiaSharp.Views.Blazor v3.119.1 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 following commands to install the NuGet packages:
    dotnet add package Syncfusion.DocIORenderer.Net.Core
    dotnet add package SkiaSharp.Views.Blazor --version 3.119.1
    

Add Syncfusion.DocIORenderer.Net.Core NuGet package

Add SkiaSharp.Views.Blazor NuGet package

NOTE

  1. If deploying the application in a Linux environment, refer to the documentation for the required additional NuGet packages.
  2. 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 and the required @code block to the file.

@page "/docio"
@using Syncfusion.DocIO
@using Syncfusion.Pdf
@using Syncfusion.DocIORenderer
@using Syncfusion.DocIO.DLS
@inject Microsoft.JSInterop.IJSRuntime JS
@inject HttpClient client

Step 4: Add a button to DocIO.razor.

Include the following code to create a new button that triggers the Word to PDF conversion:

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

Step 5: Implement WordToPDF method in DocIO.razor.

Add the following code inside an @code { } block in DocIO.razor to open and convert an existing Word document in the Blazor WebAssembly Standalone app:

private async Task WordToPDF()
{
    try
    {
        using (Stream inputStream = await client.GetStreamAsync("sample-data/Input.docx"))
        {
            // Open an existing Word document.
            using (WordDocument document = new WordDocument(inputStream, FormatType.Docx))
            {
                // Initialize the DocIORenderer for Word to PDF conversion.
                using (DocIORenderer render = new DocIORenderer())
                {
                    // Convert Word document into PDF document.
                    using (PdfDocument pdfDocument = render.ConvertToPDF(document))
                    {
                        // Save the PDF document to MemoryStream.
                        using (MemoryStream outputStream = new MemoryStream())
                        {
                            pdfDocument.Save(outputStream);
                            outputStream.Position = 0;
                            // Download PDF file in the browser.
                            await JS.SaveAs("Output.pdf", outputStream.ToArray());
                        }
                    }
                }
            }
        }
    }
}

Step 6: Create FileUtils.cs for JavaScript interoperability.

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

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.

<script>
    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.

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

Step 9: Build the project.

Run the following command in the terminal to build the project.

dotnet build

Step 10: Run the project.

Run the following command in the terminal to run the project:

dotnet run

After the app loads, navigate to **https://localhost:/docio** in the browser to test the conversion.

A complete working sample is available on GitHub.

Upon executing the program, the PDF document will be generated as follows.

Word to PDF in Blazor WASM Standalone app

NOTE

To convert Word to PDF, it is necessary to access the font stream internally. However, this cannot be done automatically in a Blazor WASM Standalone application. Therefore, it is recommended to use a Web app Server, even though Word to PDF conversion works in a WASM Standalone app.

Prerequisites:

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

  • Launch JetBrains Rider.
  • Click New Solution on the welcome screen.

Launch JetBrains Rider

  • In the New Solution dialog, set Project Type to Web.
  • Select the target framework (for example, .NET 8.0 or later).
  • Choose the Blazor WebAssembly Standalone App template.
  • Enter a project name and specify the location.
  • Click Create.

Creating a new Blazor WebAssembly Standalone app in JetBrains Rider

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

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

Select the Syncfusion.DocIORenderer.Net.Core NuGet package

  • Click the Install button to complete the installation.

Install the Syncfusion.DocIORenderer.Net.Core NuGet package

Install the SkiaSharp.Views.Blazor NuGet package

NOTE

  1. If deploying the application in a Linux environment, refer to the documentation for the required additional NuGet packages.
  2. 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 and the required @code block to the file.

@page "/docio"
@using Syncfusion.DocIO
@using Syncfusion.Pdf
@using Syncfusion.DocIORenderer
@using Syncfusion.DocIO.DLS
@inject Microsoft.JSInterop.IJSRuntime JS
@inject HttpClient client

Step 4: Add a button to DocIO.razor.

Include the following code to create a new button that triggers the Word to PDF conversion:

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

Step 5: Implement WordToPDF method in DocIO.razor.

Add the following code inside an @code { } block in DocIO.razor to open and convert an existing Word document in the Blazor WebAssembly Standalone app:

private async Task WordToPDF()
{
    try
    {
        using (Stream inputStream = await client.GetStreamAsync("sample-data/Input.docx"))
        {
            // Open an existing Word document.
            using (WordDocument document = new WordDocument(inputStream, FormatType.Docx))
            {
                // Initialize the DocIORenderer for Word to PDF conversion.
                using (DocIORenderer render = new DocIORenderer())
                {
                    // Convert Word document into PDF document.
                    using (PdfDocument pdfDocument = render.ConvertToPDF(document))
                    {
                        // Save the PDF document to MemoryStream.
                        using (MemoryStream outputStream = new MemoryStream())
                        {
                            pdfDocument.Save(outputStream);
                            outputStream.Position = 0;
                            // Download PDF file in the browser.
                            await JS.SaveAs("Output.pdf", outputStream.ToArray());
                        }
                    }
                }
            }
        }
    }
}

Step 6: Create FileUtils.cs for JavaScript interoperability.

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

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.

<script>
    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.

<div class="nav-item px-3">
    <NavLink class="nav-link" href="docio">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Convert Word to PDF
    </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. After the app loads, navigate to **https://localhost:/docio** in the browser to test the conversion.

A complete working sample is available on GitHub.

Upon executing the program, the PDF document will be generated as follows.

Word to PDF in Blazor WASM Standalone app

NOTE

To convert Word to PDF, it is necessary to access the font stream internally. However, this cannot be done automatically in a Blazor WASM Standalone application. Therefore, it is recommended to use a Web app Server, even though Word to PDF conversion works in a WASM Standalone app.

Looking for the full .NET Word Library overview, features, pricing, and documentation? Visit the .NET Word Library page.

An online sample link to convert Word document to PDF in ASP.NET Core.