Open and Save PowerPoint Presentation in Blazor

16 Oct 202515 minutes to read

Syncfusion® PowerPoint is a .NET Core PowerPoint library used to create, read, edit and convert PowerPoint documents programmatically without Microsoft PowerPoint or interop dependencies. Using this library, a open and save a Presentation in Blazor.

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

  • Select the framework and click Create button.

Select the framework in Blazor Web App Server in Visual Studio

Step 2: Install the Syncfusion.Presentation.Net.Core NuGet package.
Install the Syncfusion.Presentation.Net.Core NuGet package as reference to the project from NuGet.org.

Install Syncfusion.Presentation.Net.Core 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. Please 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 Presentation.razor in the Pages folder, which is located inside the Components folder.
Include the following namespaces in the file:

@rendermode InteractiveServer
@page "/Presentation"
@using System.IO;
@using Open_and_save_PowerPoint;
@inject Open_and_save_PowerPoint.Data.PowerPointService service
@inject Microsoft.JSInterop.IJSRuntime JS

Step 4: Add a button to Presentation.razor.
Include the following code to create a new button that triggers the presentation processing:

<h2>Syncfusion PowerPoint Library (Essential Presentation)</h2>
<p>The Syncfusion Blazor PowerPoint library (Essential Presentation) used to create, read, edit, and convert PowerPoint files in applications without Microsoft Office dependencies.</p>
<button class="btn btn-primary" @onclick="@OpenAndSavePresentation">Open and Save Presentation</button>

Step 5: Implement OpenAndSavePresentation method in Presentation.razor.
Add the following code to create and download the Presentation document.

@code {
    MemoryStream documentStream;
    /// <summary>
    /// Generate and download the PowerPoint Presentaion
    /// </summary>
    protected async void OpenAndSavePresentation()
    {
        documentStream = service.OpenAndSavePresentation();
        await JS.SaveAs("Result.pptx", documentStream.ToArray());
    }
}

Step 6: Create a new cs file PowerPointService in the Data folder.
Include the following namespaces in the file.

using Syncfusion.Presentation;

Step 7: Implement the OpenAndSavePresentation method in PowerPointService.cs.
Create a new MemoryStream method named OpenAndSavePresentation in the PowerPointService class, and include the following code snippet to open an existing PowerPoint Presentation in Blazor Web app Server.

using (FileStream sourceStreamPath = new FileStream(@"wwwroot/Template.pptx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite));
// Open an existing PowerPoint Presentation.
using (IPresentation pptxDoc = Presentation.Open(sourceStreamPath));

Step 8: Add below code snippet demonstrates accessing a shape from a slide and changing the text within it.

// Get the first slide from the PowerPoint Presentation.
ISlide slide = pptxDoc.Slides[0];
// Get the first shape of the slide.
IShape shape = slide.Shapes[0] as IShape;
// Change the text of the shape.
if (shape.TextBody.Text == "Company History")
    shape.TextBody.Text = "Company Profile";

Step 9: Add below code example to save the PowerPoint Presentation in Blazor Web App Server.

// Save the PowerPoint Presentation as stream.
MemoryStream pptxStream = new();
pptxDoc.Save(pptxStream);
pptxStream.Position = 0;
// Download Powerpoint document in the browser.
return pptxStream;

Step 10: Add the service in Program.cs.
Add the following line to the Program.cs file to register PowerPointService as a scoped service in the Blazor application.

builder.Services.AddScoped<Open_and_save_PowerPoint.Data.PowerPointService>();

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

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 12: Add the following JavaScript function to App.razor.
Add this function in the App.razor file located in the Pages 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');
            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 13: Add the 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="presentation">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Generate Presentation
    </NavLink>
</div>

Step 14: Build the project.

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

Step 15: 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 PowerPoint document will be generated as follows.

Blazor Web App Server output PowerPoint document

Click here to explore the rich set of Syncfusion® PowerPoint Library (Presentation) features.

WASM Standalone Application

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 the Next button.

Create Blazor WebAssembly application in Visual Studio for Blazor PowerPoint document

Step 2: Install the Syncfusion.Presentation.Net.Core NuGet package.
To create a PowerPoint document in WASM Standalone app, install Syncfusion.Presentation.Net.Core to the Blazor project.

Install Syncfusion.Presentation.Net.Core 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. Please 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 Presentation.razor in the Pages folder.
Add the following namespaces in the file.

@page "/presentation"
@inject Microsoft.JSInterop.IJSRuntime JS
@inject HttpClient client
@using Syncfusion.Presentation
@using System.IO

Step 4: Add a button to Presentation.razor.
Include the following code to create a new button that triggers the presentation processing:

<h2>Syncfusion PowerPoint Library (Essential Presentation)</h2>
<p>The Syncfusion Blazor PowerPoint library (Essential Presentation) used to create, read, edit, and convert PowerPoint files in applications without Microsoft Office dependencies.</p>
<button class="btn btn-primary" @onclick="@OpenAndSavePresentation">Open and Save Presentation</button>

Step 5: Implement OpenAndSavePresentation method in Presentation.razor.
Create a new async method named OpenAndSavePresentation and include the following code snippet to open an existing PowerPoint Presentation in Blazor WASM Standalone app.

using (Stream inputStream = await client.GetStreamAsync("Data/Template.pptx"));
// Open an existing PowerPoint Presentation.
using (IPresentation pptxDoc = Syncfusion.Presentation.Presentation.Open(inputStream));

Step 6: Add below code snippet demonstrates accessing a shape from a slide and changing the text within it.

// Get the first slide from the PowerPoint Presentation.
ISlide slide = pptxDoc.Slides[0];
// Get the first shape of the slide.
IShape shape = slide.Shapes[0] as IShape;
// Change the text of the shape.
if (shape.TextBody.Text == "Company History")
    shape.TextBody.Text = "Company Profile";

Step 7: Add below code example to save the PowerPoint Presentation in Blazor WASM Standalone app.

// Save the PowerPoint Presentation as stream.
MemoryStream pptxStream = new();
pptxDoc.Save(pptxStream);
pptxStream.Position = 0;
// Download Powerpoint document in the browser.
await JS.SaveAs("Sample.pptx", pptxStream.ToArray());

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

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 to index.html.
Add this function in the index.html file located in wwwroot.

<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 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="presentation">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Generate Presentation
    </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 PowerPoint document will be generated as follows.

Blazor WASM Standalone output PowerPoint document

NOTE

While the PowerPoint library works in WASM Standalone app, server-side deployment is recommended. WASM Standalone app deployment increases the application payload size.

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

Click here to explore the rich set of Syncfusion® PowerPoint Library (Presentation) features.