diff --git a/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor-WASM-Standalone-app-template.png b/Document-Processing/Word/Word-Library/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/Word-Library/NET/Blazor_Images/Blazor-WASM-Standalone-app-template.png differ diff --git a/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor-Web-app-template.png b/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor-Web-app-template.png new file mode 100644 index 000000000..23d65753b Binary files /dev/null and b/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor-Web-app-template.png differ diff --git a/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor_WASM_Standalone.png b/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor_WASM_Standalone.png new file mode 100644 index 000000000..244de2a1b Binary files /dev/null and b/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor_WASM_Standalone.png differ diff --git a/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor_image_Server_Web_Additional_Information.png b/Document-Processing/Word/Word-Library/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/Word-Library/NET/Blazor_Images/Blazor_image_Server_Web_Additional_Information.png differ diff --git a/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor_image_Web_App.png b/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor_image_Web_App.png new file mode 100644 index 000000000..904c511db Binary files /dev/null and b/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor_image_Web_App.png differ diff --git a/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor_image_Web_ProjectName.png b/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor_image_Web_ProjectName.png new file mode 100644 index 000000000..d424433e3 Binary files /dev/null and b/Document-Processing/Word/Word-Library/NET/Blazor_Images/Blazor_image_Web_ProjectName.png differ diff --git a/Document-Processing/Word/Word-Library/NET/Create-Word-document-in-Blazor.md b/Document-Processing/Word/Word-Library/NET/Create-Word-document-in-Blazor.md index 101e2d396..2b5e3712a 100644 --- a/Document-Processing/Word/Word-Library/NET/Create-Word-document-in-Blazor.md +++ b/Document-Processing/Word/Word-Library/NET/Create-Word-document-in-Blazor.md @@ -1,20 +1,20 @@ --- title: Create Word document in Blazor | DocIO | Syncfusion -description: Create Word document without Microsoft Word or interop dependencies in Blazor application using Syncfusion® .NET Word (DocIO) library. +description: Create Word documents without Microsoft Word or interop dependencies in Blazor applications using Syncfusion® .NET Word (DocIO) library. platform: document-processing control: DocIO documentation: UG --- -# Create Word document in Blazor +# Create Word Document in Blazor -Syncfusion® Essential® DocIO is a [.NET Core Word library](https://www.syncfusion.com/document-processing/word-framework/net-core/word-library) used to create, read, and edit **Word** documents programmatically without **Microsoft Word** or interop dependencies. Using this library, you can **create a Word document in Blazor**. +Syncfusion® Essential® DocIO is a [.NET Core Word library](https://www.syncfusion.com/document-processing/word-framework/net-core/word-library) used to create, read, and edit **Word** documents programmatically without **Microsoft Word** or interop dependencies. Using this library, a **create a Word document in Blazor**. -To quickly get started with creating a Word document in Blazor, check this video: +To quickly get started with creating a Word document in Blazor, watch this video: {% youtube "https://www.youtube.com/watch?v=yVfDlpewbpU" %} -## Server app +## Blazor Web App Server Application {% tabcontents %} @@ -22,49 +22,63 @@ To quickly get started with creating a Word document in Blazor, check this video **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) + +* Name the project and click **Next**. -Step 1: Create a new C# Blazor Server app project. Select Blazor Server App from the template and click the Next button. +![Name the Blazor Web App in Visual Studio](Blazor_Images/Blazor_image_Web_ProjectName.png) -![Create Blazor Server application in Visual Studio](Blazor_Images/Blazor_Create.png) +* Select the framework and click **Create** button. -Step 2: To **create a Word document in Blazor Server app**, install [Syncfusion.DocIO.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIO.Net.Core) to the Blazor project. +![Select the framework in Blazor Web App Server in Visual Studio](Blazor_Images/Blazor_image_Server_Web_Additional_Information.png) + +Step 2: Install the `Syncfusion.DocIO.Net.Core` NuGet package. +To **create a Word document in a Blazor Web App Server**, install [Syncfusion.DocIO.Net.Core](https://www.nuget.org/packages/Syncfusion.DocIO.Net.Core) into the Blazor project. ![Install DocIO.NET Core NuGet Package](Blazor_Images/Install_Nuget.png) -N> 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> 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#" %} +@rendermode InteractiveServer @page "/DocIO" @using System.IO; -@using ServerSideApplication; -@inject ServerSideApplication.Data.WordService service +@using Create_Word_document; +@inject Create_Word_document.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 document creation: {% tabs %} {% highlight CSHTML %} -

Syncfusion DocIO library (Essential DocIO)

-

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

+

Syncfusion DocIO Library (Essential DocIO)

+

The Syncfusion DocIO library (Essential DocIO) 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 **Word document**. +Step 5: Implement `CreateWord` method in `DocIO.razor`. +Add the following code to create and download the Word document: {% tabs %} {% highlight c# tabtitle="C#" %} @code { MemoryStream documentStream; /// - /// Create and download the Word document + /// Creates and downloads the Word document. /// protected async void CreateWord() { @@ -75,7 +89,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 %} @@ -87,7 +102,8 @@ using System.IO; {% endtabs %} -Step 7: Create a new MemoryStream method with name as **CreateWord** in **WordService** class and include the following code snippet to **create a simple Word document in Blazor** Server app. +Step 7: Implement the `CreateWord` method in `WordService.cs`. +Create a new `MemoryStream` method named `CreateWord` in the `WordService` class, and include the following code snippet to **create a simple Word document in Blazor** Web App Server: {% tabs %} @@ -95,16 +111,16 @@ Step 7: Create a new MemoryStream method with name as **CreateWord** in **WordSe public MemoryStream CreateWord() { - //Creating a new document + // Creating a new Word document WordDocument document = new WordDocument(); - //Adding a new section to the document + // Adding a new section to the document WSection section = document.AddSection() as WSection; - //Set Margin of the section + // Set Margin of the section section.PageSetup.Margins.All = 72; - //Set page size of the section + // Set page size of the section section.PageSetup.PageSize = new Syncfusion.Drawing.SizeF(612, 792); - //Create Paragraph styles + // Create Paragraph styles WParagraphStyle style = document.AddParagraphStyle("Normal") as WParagraphStyle; style.CharacterFormat.FontName = "Calibri"; style.CharacterFormat.FontSize = 11f; @@ -131,7 +147,7 @@ public MemoryStream CreateWord() textRange.CharacterFormat.FontName = "Calibri"; textRange.CharacterFormat.TextColor = Syncfusion.Drawing.Color.Red; - //Appends paragraph + // Appends paragraph paragraph = section.AddParagraph(); paragraph.ApplyStyle("Heading 1"); paragraph.ParagraphFormat.HorizontalAlignment = HorizontalAlignment.Center; @@ -139,24 +155,24 @@ public MemoryStream CreateWord() textRange.CharacterFormat.FontSize = 18f; textRange.CharacterFormat.FontName = "Calibri"; - //Appends paragraph + // Appends paragraph paragraph = section.AddParagraph(); paragraph.ParagraphFormat.FirstLineIndent = 36; paragraph.BreakCharacterFormat.FontSize = 12f; textRange = paragraph.AppendText("Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base.") as WTextRange; textRange.CharacterFormat.FontSize = 12f; - //Appends paragraph + // Appends paragraph paragraph = section.AddParagraph(); paragraph.ParagraphFormat.FirstLineIndent = 36; paragraph.BreakCharacterFormat.FontSize = 12f; textRange = paragraph.AppendText("In 2000, AdventureWorks Cycles bought a small manufacturing plant, Importadores Neptuno, located in Mexico. Importadores Neptuno manufactures several critical subcomponents for the AdventureWorks Cycles product line. These subcomponents are shipped to the Bothell location for final product assembly. In 2001, Importadores Neptuno, became the sole manufacturer and distributor of the touring bicycle product group.") as WTextRange; textRange.CharacterFormat.FontSize = 12f; - //Saves the Word document to MemoryStream + // Saves the Word document to MemoryStream MemoryStream stream = new MemoryStream(); document.Save(stream, FormatType.Docx); - //Closes the Word document + // Closes the Word document document.Close(); stream.Position = 0; return stream; @@ -165,18 +181,20 @@ public MemoryStream CreateWord() {% 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 %} @@ -194,7 +212,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 %} @@ -203,7 +222,7 @@ Step 10: Add the following JavaScript function in the _Host.cshtml in the Pages