How to convert Word to Image in Blazor WebAssembly (WASM)?
Syncfusion® Essential® DocIO is a Blazor Word library used to create, read, and edit Word documents programmatically without Microsoft Word or Interop dependencies. By using this library, you can convert a Word document to images in Blazor WebAssembly (WASM).
Steps to convert Word document to images in Blazor WebAssembly (WASM)
- Create a new C# Blazor WebAssembly App in Visual Studio. `
- Install the Syncfusion.DocIORenderer.Net.Core NuGet package as a reference to your Blazor application from NuGet.org.
- Install the SkiaSharp.Views.Blazor v2.88.8 NuGet package as a reference to your Blazor application from NuGet.org.
Note:
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.
C#
@page "/docio" @inject Microsoft.JSInterop.IJSRuntime JS @inject HttpClient client @using System.IO @using Syncfusion.DocIO @using Syncfusion.DocIO.DLS @using Syncfusion.DocIORenderer
5. Add the following code to create a button.
CSHTML
<h2>Syncfusion DocIO library (Essential DocIO)</h2> <p>Syncfusion Blazor DocIO library (Essential DocIO) used to create, read, edit, and convert DocIO files in your applications without Microsoft Office dependencies.</p> <button class="btn btn-primary" @onclick="@WordToImage">Convert Word to Image</button>
6. Create a new async method with the name WordToImage and include the following code sample to convert a Word document to images.
C#
@functions {
async void WordToImage()
{
using (Stream inputStream = await client.GetStreamAsync("sample-data/Input.docx"))
{
//Open an existing Word document.
using (WordDocument document = new WordDocument(inputStream, FormatType.Automatic))
{
//Initialize the DocIORenderer for Word to Image conversion.
using (DocIORenderer render = new DocIORenderer())
{
//Convert an entire Word document to images.
Stream[] imageStreams = document.RenderAsImages();
for (int i = 0; i < imageStreams.Length; i++)
{
imageStreams[i].Position = 0;
//Download image file in the browser.
await JS.SaveAs("WordToImage_" + 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="docio"> <span class="oi oi-list-rich" aria-hidden="true"></span> Word to Image </NavLink> </li>
A complete working sample to convert Word 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 Word document processing options along with features such as mail merge, merge and split documents, find and replace text in the Word document, protect the Word documents, and most importantly, the PDF and Image conversions with code examples.
Explore more about the rich set of Syncfusion® Word Framework features.
An online example to convert Word documents to images.
Conclusion
I hope you enjoyed learning about how to convert Word to Image in Blazor WebAssembly (WASM).
You can refer to our Blazor DocIO’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Blazor DocIO 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 DocIO 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!
