How to load PPT in Blazor?

Introduction

I recently gave a presentation at CSharpCon23, and needless to say, it was the most fun and knowledgeable experience I've had in a year and I was proud to share the stage with prominent industry leaders.

After the presentation, during the Q&A session, many students requested a way to share the presentation. This inspired me to explore the idea of loading a presentation on the web. Utilizing my personal website, "https://rikampalkar.github.io", I decided to present the PowerPoint live on the site. Surprisingly, the process was easier than I anticipated. In this article, we will explore how to seamlessly integrate a PowerPoint presentation into Blazor applications.

Let's take a look at the live presentation hosted here => https://rikampalkar.github.io/portfolio/ppt

Gif 1: Output of Live PPT

There is a straightforward way to achieve this. Save your PowerPoint presentation on OneDrive and upload it. In the following Image 1, you can see I have a PowerPoint presentation named "Blazing Apps" uploaded under the folder named "PPT" Ensure that the folder "PPT" is set to public.

Uploading PPT under a public folder in OneDrive

Image 1: Uploading PPT under a public folder in OneDrive

Embedding the PowerPoint Presentation

Now, right-click on the PowerPoint presentation and select the "Embed" option, as shown below.

Fetching Embed option

Image 2: Fetching Embed option

This will open up the embed code, which we need to use in our component. Copy this code and paste it in Notepad; we'll use it later.

Getting Embed code

Image 3: Getting Embed code

The Razor Component

Go ahead and add a component to your Blazor project. Name it as you wish; I am calling it "PPT." This is where the magic happens—it is responsible for hosting your PowerPoint presentation. Now, take a look at line number 6; this is where I've pasted the embed code I copied from Image 3.

@page "/ppt"
@inject IJSRuntime JS;

<div class="iframe-container">
    <BusyIndicator IsLoading="isLoading" />
    <iframe src="https://onedrive.live.com/embed?resid=651BB1024BD1BBB0%216551&authkey=!AO4kW1ZdL1xKqpc&em=2"
            frameborder="0"
            scrolling="no">
    </iframe>
</div>

@code {
    private bool isLoading = true;

    protected override async Task OnInitializedAsync()
    {
        await JS.InvokeVoidAsync("ShowPPTDialog");
        isLoading = false;
    }
}

Listing 1: PPT.razor

The CSS

If you're interested, use this CSS. Ensure you have a suitable container for your iframe. In my case, I've created a container using the following CSS.

.iframe-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 98vh;
    border: 8px solid rgba(0, 0, 0, 0.9);
    border-radius: 8px;
    overflow: hidden;
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
}

Listing 2: PPT.razor.css

The JS No One Asked For

What's a presentation without a touch of humor? I've spiced up the loading process with a delightful dialog, showcasing loading progress and adding a playful touch to the user experience.

let timerInterval;
window.ShowPPTDialog = () => {
    Swal.fire({
        title: "TicTacToe AI Game in Blazor - Rikam Palkar",
        html: "<p> Presented at Sharda University, Delhi, India</p><p>Event organized by C#Corner</p> </br> Navigate through the presentation using the arrow keys. ( ↑  →  ↓  ← )",
        timer: 3000,
        timerProgressBar: true,
        didOpen: () => {
            Swal.showLoading();
            const timer = Swal.getPopup().querySelector("b");
            timerInterval = setInterval(() => {
                timer.textContent = `${Swal.getTimerLeft()}`;
            }, 100);
        },
        willClose: () => {
            clearInterval(timerInterval);
        }
    }).then((result) => {
        if (result.dismiss === Swal.DismissReason.timer) {
            console.log("Closed by the timer");
        }
    });
}

Listing 3: PPT.js

Conclusion

And there you have it, folks! We've unraveled the secrets of embedding a PowerPoint presentation in Blazor. Feel free to experiment with your own presentations, and remember, in the world of Blazor, the possibilities are as vast as your imagination. Happy coding!