How to convert PPTX to Image in Blazor WebAssembly (WASM)?
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)
- Create a new C# Blazor WebAssembly App in Visual Studio.
- Install the Syncfusion.PresentationRenderer.Net.Core NuGet package as a reference to your Blazor application from NuGet.org.
- Install the SkiaSharp.Views.Blazor v2.88.6 NuGet package as a reference to your Blazor application from NuGet.org.
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 Presentation under the Pages folder and add the following namespaces in the file.
C#
@page "/presentation" @inject Microsoft.JSInterop.IJSRuntime JS @inject HttpClient client @using System.IO @using Syncfusion.Presentation @using Syncfusion.PresentationRenderer
5. Add the following code to create a button.
CSHTML
<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>
6. Create a new async method with the name PPTXToImage and include the following code sample to convert a PowerPoint to images.
C#
@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());
}
}
}
}
}
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="presentation"> <span class="oi oi-list-rich" aria-hidden="true"></span> PPTX to Image </NavLink> </li>
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.
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.
Conclusion
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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
