Articles in this section
Category / Section

How to convert Word to PDF in Blazor WebAssembly (WASM)?

6 mins read

Syncfusion Essential DocIO is a Blazor Word library used to create, read, and edit Word documents programmatically without Microsoft Word or Interop dependencies. By using this library, you can convert a Word document to PDF in Blazor WebAssembly (WASM).

Steps to convert Word document to PDF in Blazor WebAssembly (WASM)

  1. Create a new C# Blazor WebAssembly App in Visual Studio. Create Blazor WebAssembly App in Visual Studio
  2. Install the Syncfusion.DocIORenderer.Net.Core NuGet package as a reference to your Blazor application from NuGet.org. Install Syncfusion.DocIORenderer.Net.Core Nuget package
  3. Install the SkiaSharp.Views.Blazor v2.88.8 NuGet package as a reference to your Blazor application from NuGet.org.Install SkiaSharp.Views.Blazor v2.88.6 NuGet package

Note:
1. Install this wasm-tools and wasm-tools-net6 by using the "dotnet workload install wasm-tools" and "dotnet workload install wasm-tools-net6" commands in your command prompt respectively if you are facing issues related to Skiasharp during runtime.

2. After installing wasm tools using the above commands, please restart your machine.

4. Create a razor file named as DocIO under the Pages folder and add the following namespaces in the file.

C#

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

5. Add the following code to create a button.

CSHTML

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

6. Create a new async method with the name WordToPDF and include the following code sample to convert a Word document to PDF.

C#

@functions {
    async void WordToPDF()
    {
        using (Stream inputStream = await client.GetStreamAsync("sample-data/Input.docx"))
        {
            //Open an existing Word document.
            using (WordDocument document = new WordDocument(inputStream, FormatType.Automatic))
            {
                //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());
                        }
                    }
                }
            }
        }
    }
}

7. 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));
}

8. Add the following JavaScript function in the Index.html file present under the wwwroot 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>

9. Add the following code sample in the razor file of the Navigation menu in the Shared folder.

CSHTML

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

A complete working sample to convert Word documents to PDF in Blazor WebAssembly (WASM) can be downloaded from GitHub.

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

Output PDF generated by Blazor Word library

Take a moment to peruse the documentation, where you can find basic Word document processing options along with features such as mail mergemerge and split documents, find and replace text in the Word document, protect the Word documents, and most importantly, the PDF and Image conversions with code examples.

Explore more about the rich set of Syncfusion Word Framework features.

An online example to convert Word documents to PDF.

Conclusion

I hope you enjoyed learning about how to convert Word to PDF in Blazor WebAssembly (WASM).

You can refer to our Blazor DocIO’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Blazor DocIO documentation to understand how to present and manipulate data.

For current customers, you can check out our Blazor components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Blazor DocIO and other Blazor components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

 

 










Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied