Open and save Presentation in Blazor

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, you can open and save a Presentation in Blazor.

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 for Blazor PowerPoint document

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

Install Syncfusion.Presentation.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 Presentation under Pages folder and include the following namespaces in the file.

@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 the following code to create a new 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="@OpenAndSavePresentation">Open and Save Presentation</button>

Step 5: Add the following code in Presentation.razor file 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 with name as PowerPointService under Data folder and include the following namespaces in the file.

using Syncfusion.Presentation;

Step 7: Create a new MemoryStream method with name as OpenAndSavePresentation in PowerPointService class and include the following code snippet to open an existing PowerPoint Presentation in Blazor Server app.

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 Server app.

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

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.

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

You can download a complete working sample from GitHub.

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

Blazor Server output PowerPoint document

Click here to explore the rich set of Syncfusion® PowerPoint Library (Presentation) 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 for Blazor PowerPoint document

Step 2: To create a PowerPoint document in WASM 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 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 Presentation under Pages folder and 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 the following code to create a new 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="@OpenAndSavePresentation">Open and Save Presentation</button>

Step 5: Create a new async method with name as OpenAndSavePresentation and include the following code snippet to open an existing PowerPoint Presentation in Blazor WASM 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 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: To download the PowerPoint document in browser, 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>(
            "saveAsFile",
            filename,
            Convert.ToBase64String(data));
}

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

You can download a complete working sample from GitHub.

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

Blazor WASM output PowerPoint document

NOTE

Even though PowerPoint library works in WASM app, it is recommended to use server deployment. Since the WASM app deployment increases the application payload size. You can also explore our Blazor PowerPoint library demo that shows how to create and modify PowerPoint files from C# with just five lines of code.

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