Articles in this section
Category / Section

How to convert PPTX to Image in Blazor WebAssembly (WASM)?

3 mins read

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

Steps to convert PowerPoint to images 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.PresentationRenderer.Net.Core NuGet package as a reference to your Blazor application from Add PresentationRenderer.Net.Core NuGet packages of Blazor PowerPoint library
  3. Install the SkiaSharp.NativeAssets.WebAssembly NuGet package as a reference to your Blazor application from Add SkiaSharp.NativeAssets.WebAssembly NuGet packages of Blazor PowerPoint library
  4. Add the following ItemGroup tag in the Blazor WASM csproj file.


    <NativeFileReference Include="$(SkiaSharpStaticLibraryPath)\2.0.23\*.a" />



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.

  1. Enable the following property in the Blazor WASM csproj file.


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


@page "/presentation"
@inject Microsoft.JSInterop.IJSRuntime JS
@inject HttpClient client
@using System.IO
@using Syncfusion.Presentation
@using Syncfusion.PresentationRenderer
  1. Add the following code to create a button.


<h2>Syncfusion PowerPoint library (Essential Presentation)</h2>
<p>Syncfusion Blazor PowerPoint library (Essential Presentation) used to create, read, edit, and convert PowerPoint files in your applications without Microsoft Office dependencies.</p>
<button class="btn btn-primary" @onclick="@PPTXToImage">Convert PPTX to Image</button>
  1. Create a new async method with the name PPTXToImage and include the following code sample to convert a PowerPoint to images.


@functions {
    async void PPTXToImage()
        using (Stream inputStream = await client.GetStreamAsync("sample-data/Input.pptx"))
            //Open an existing PowerPoint Presentation file.
            using (IPresentation pptxDoc = Syncfusion.Presentation.Presentation.Open(inputStream))
                //Initialize the PresentationRenderer to perform image conversion.
                pptxDoc.PresentationRenderer = new PresentationRenderer();
                //Convert the entire Presentation to images.
                Stream[] imageStreams = pptxDoc.RenderAsImages(ExportImageFormat.Jpeg);
                for (int i = 0; i < imageStreams.Length; i++)
                    imageStreams[i].Position = 0;
                    //Download image file in the browser.
                    await JS.SaveAs("PPTXToImage_" + i + ".jpeg", (imageStreams[i] as MemoryStream).ToArray());
  1. Create a class file with FileUtils name and add the following code to invoke the JavaScript action to download the file in the browser.


public static class FileUtils
    public static ValueTask<object> SaveAs(this IJSRuntime js, string filename, byte[] data)
       => js.InvokeAsync<object>(
  1. Add the following JavaScript function in the Index.html file present under the wwwroot folder.


<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');
   = filename;
            link.href = "data:application/octet-stream;base64," + bytesBase64;
            document.body.appendChild(link); // Needed for Firefox
  1. Add the following code sample in the razor file of the Navigation menu in the Shared folder.


<li class="nav-item px-3">
    <NavLink class="nav-link" href="presentation">
        <span class="oi oi-list-rich" aria-hidden="true"></span> PPTX to Image

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

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

Output images generated by Blazor PowerPoint library

Take a moment to peruse the documentation, where you can find basic slide manipulation options Working with slides, adding Charts in slide, organizing and analyzing data through Tables, and most importantly, the PDF and Image conversions with code examples.

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

An online example to convert PowerPoint documents to images.


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

You can refer to our Blazor PowerPoint library’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Blazor PowerPoint library 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 PowerPoint library 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?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment