diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor-WASM-Standalone-app-template.png b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor-WASM-Standalone-app-template.png new file mode 100644 index 000000000..104bb4ead Binary files /dev/null and b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor-WASM-Standalone-app-template.png differ diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor-Web-app-template.png b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor-Web-app-template.png new file mode 100644 index 000000000..23d65753b Binary files /dev/null and b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor-Web-app-template.png differ diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor_WASM_Standalone.png b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor_WASM_Standalone.png new file mode 100644 index 000000000..244de2a1b Binary files /dev/null and b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor_WASM_Standalone.png differ diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor_image_Server_Web_Additional_Information.png b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor_image_Server_Web_Additional_Information.png new file mode 100644 index 000000000..4f8ec78c0 Binary files /dev/null and b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor_image_Server_Web_Additional_Information.png differ diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor_image_Web_App.png b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor_image_Web_App.png new file mode 100644 index 000000000..904c511db Binary files /dev/null and b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor_image_Web_App.png differ diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor_image_Web_ProjectName.png b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor_image_Web_ProjectName.png new file mode 100644 index 000000000..d424433e3 Binary files /dev/null and b/Document-Processing/Word/Conversions/Word-To-Image/NET/Blazor_Images/Blazor_image_Web_ProjectName.png differ diff --git a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Blazor.md b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Blazor.md index f7a417092..92b11583c 100644 --- a/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Blazor.md +++ b/Document-Processing/Word/Conversions/Word-To-Image/NET/Convert-Word-Document-to-Image-in-Blazor.md @@ -6,12 +6,11 @@ control: DocIO documentation: UG --- -# Convert Word document to Image in Blazor +# Convert Word Document to Image in Blazor -Syncfusion® DocIO is a [Blazor Word library](https://www.syncfusion.com/document-processing/word-framework/blazor/word-library) used to create, read, edit, and **convert Word documents** programmatically without **Microsoft Word** or interop dependencies. Using this library, you can **convert a Word document to image in Blazor**. +Syncfusion® DocIO is a [Blazor Word library](https://www.syncfusion.com/document-processing/word-framework/blazor/word-library) used to create, read, edit, and **convert Word documents** programmatically without **Microsoft Word** or interop dependencies. Using this library, a **convert a Word document to image in Blazor**. - -## Word to Image in Blazor Server app +## Word to Image in Blazor Web App Server Application {% tabcontents %} @@ -19,46 +18,61 @@ Syncfusion® DocIO is a [Blazor Word library](https://www.syncfusi **Prerequisites:** -* Visual Studio 2022. -* Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +* Visual Studio 2022. +* Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) 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](Blazor_Images/Blazor_image_Web_App.png) -Step 1: Create a new C# Blazor Server app project. Select Blazor Server App from the template and click the Next button. +* Name the project and click **Next**. -![Create Blazor Server app](Blazor_Images/Create-server-project-WordToPDF.png) +![Name the Blazor Web App in Visual Studio](Blazor_Images/Blazor_image_Web_ProjectName.png) -Step 2: To **convert a Word document to image in server app**, install [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) to the Blazor project. +* Select the framework and click **Create** button. + +![Select the framework in Blazor Web Server App in Visual Studio](Blazor_Images/Blazor_image_Server_Web_Additional_Information.png) + +Step 2: Install the `Syncfusion.DocIORenderer.Net.Core` NuGet package. +To **convert a Word document to image in Web App Server**, install [Syncfusion.DocIORenderer.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) into the Blazor project. ![Install Syncfusion.DocIORenderer.Net.Core NuGet Package](Blazor_Images/Nuget-Package-WordtoImage.png) -N> 1. If you're deploying the application in a Linux environment, refer to the [documentation](https://help.syncfusion.com/document-processing/word/conversions/word-to-image/net/nuget-packages-required-word-to-image#additional-nuget-packages-required-for-linux) for the required additional NuGet packages. -N> 2. 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](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in your application to use our components. +N> 1. If deploying the application in a Linux environment, refer to the [documentation](https://help.syncfusion.com/document-processing/word/conversions/word-to-image/net/nuget-packages-required-word-to-image#additional-nuget-packages-required-for-linux) for the required additional NuGet packages. +N> 2. 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. Refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion® license key in an application to use Syncfusion components. -Step 3: Create a razor file with name as **DocIO** under **Pages** folder and include the following namespaces in the file. +Step 3: Create a Razor file named `DocIO.razor` in the `Pages` folder, which is located inside the `Components` folder. +Include the following namespaces in the file: {% tabs %} {% highlight c# tabtitle="C#" %} -@page "/docio" +@rendermode InteractiveServer +@page "/DocIO" +@using System.IO; @using Convert_Word_Document_to_Image; -@inject Convert_Word_Document_to_Image.Data.WordService service; -@inject Microsoft.JSInterop.IJSRuntime JS; +@inject Convert_Word_Document_to_Image.Data.WordService service +@inject Microsoft.JSInterop.IJSRuntime JS {% endhighlight %} {% endtabs %} -Step 4: Add the following code in **DocIO.razor** file to create a new button. +Step 4: Add a button to `DocIO.razor`. +Include the following code to create a new button that triggers the Word to Image conversion: {% tabs %} {% highlight CSHTML %} -

Syncfusion DocIO library

-

Syncfusion DocIO library is a Blazor DocIO library used to create, read, edit, and convert Word files in your applications without Microsoft Office dependencies.

+

Syncfusion DocIO Library

+

The Syncfusion DocIO library is a Blazor DocIO library used to create, read, edit, and convert Word files in applications without Microsoft Office dependencies.

{% endhighlight %} {% endtabs %} -Step 5: Add the following code in **DocIO.razor** file to create and download the **image**. +Step 5: Implement method in `DocIO.razor`. +Add the following code to convert the Word document to an image and download it: {% tabs %} {% highlight c# tabtitle="C#" %} @@ -76,7 +90,8 @@ Step 5: Add the following code in **DocIO.razor** file to create and download th {% endhighlight %} {% endtabs %} -Step 6: Create a new cs file with name as **WordService** under Data folder and include the following namespaces in the file. +Step 6: Create a new cs file `WordService.cs` in the `Data` folder. +Include the following namespaces in the file: {% tabs %} @@ -90,23 +105,24 @@ using Syncfusion.DocIORenderer; {% endtabs %} -Step 7: Create a new MemoryStream method with name as **ConvertWordtoImage** in **WordService** class and include the following code snippet to **convert the Word document to image** in Server app. +Step 7: Implement the method in `WordService.cs`. +Create a new `MemoryStream` method in the `WordService` class, and include the following code snippet to **convert a Word document to an image** Web App Server: {% tabs %} {% highlight c# tabtitle="C#" %} -//Open the file as Stream +// Open the file as Stream using (FileStream sourceStreamPath = new FileStream(@"wwwroot/Template.docx", FileMode.Open, FileAccess.Read, FileShare.ReadWrite)) { - //Open an existing Word document. + // Open an existing Word document. using (WordDocument document = new WordDocument(sourceStreamPath, FormatType.Docx)) { - //Instantiation of DocIORenderer for Word to image conversion + // Instantiation of DocIORenderer for Word to image conversion using (DocIORenderer render = new DocIORenderer()) { Stream imageStream = document.RenderAsImages(0, ExportImageFormat.Jpeg); - //Reset the stream position. + // Reset the stream position. imageStream.Position = 0; return (MemoryStream)imageStream; } @@ -117,17 +133,19 @@ using (FileStream sourceStreamPath = new FileStream(@"wwwroot/Template.docx", Fi {% endtabs %} -Step 8: Add the following line to the Program.cs file to register the WordService as a scoped service in your Blazor application. +Step 8: Add the service in `Program.cs`. +Add the following line to the `Program.cs` file to register `WordService` as a scoped service in the Blazor application. {% tabs %} {% highlight c# tabtitle="C#" %} -builder.Services.AddSingleton(); +builder.Services.AddScoped(); {% endhighlight %} {% endtabs %} -Step 9: 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. +Step 9: 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. {% tabs %} @@ -145,7 +163,8 @@ public static class FileUtils {% endtabs %} -Step 10: Add the following JavaScript function in the _Host.cshtml in the Pages folder. +Step 10: Add JavaScript function to `App.razor`. +Add the following JavaScript function in the `App.razor` file located in the `Pages` folder. {% tabs %} @@ -154,7 +173,7 @@ Step 10: Add the following JavaScript function in the _Host.cshtml in the Pages