| layout | post |
|---|---|
| title | Getting Started with Blazor WASM DOCX Editor | Syncfusion |
| description | Learn how to create a DOCX Editor in a Blazor WASM application using the Syncfusion® Document Editor control to create, edit, and view Word documents. |
| platform | document-processing |
| control | DocumentEditor |
| documentation | ug |
Syncfusion® Blazor DOCX Editor (Document Editor) enables you to create, edit, view, and print Word documents in web applications. This section guides you through the steps to get started and create a DOCX Editor in a Blazor WebAssembly (WASM) application.
This section explains how to include the Document Editor component in a Blazor WebAssembly (WASM) application using Visual Studio and Visual Studio Code.
{% tabcontents %}
{% tabcontent Visual Studio %}
You can create a Blazor WebAssembly App using Visual Studio via Microsoft Templates.
To add Document Editor component in the application, follow the steps below.
- open NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution),
- search and install the following packages
Alternatively, you can utilize the following package manager command to achieve the same.
{% tabs %} {% highlight C# tabtitle="Package Manager" %}
Install-Package Syncfusion.Blazor.WordProcessor Install-Package Syncfusion.Blazor.Themes
{% endhighlight %} {% endtabs %}
N> Document Editor are available on nuget.org. Refer to the NuGet packages topic for the complete list of packages and component details.
{% endtabcontent %}
{% tabcontent Visual Studio Code %}
You can create a Blazor WebAssembly App using Visual Studio Code via Microsoft Templates.
Alternatively, create a WebAssembly application using the following terminal commands (Ctrl+`).
{% tabs %}
{% highlight c# tabtitle="Blazor WASM App" %}
dotnet new blazorwasm -o BlazorApp cd BlazorApp
{% endhighlight %}
{% endtabs %}
- Press Ctrl+` to open the integrated terminal in Visual Studio Code.
- Ensure you’re in the project root directory where your
.csprojfile is located. - Run the following command to install
{% tabs %}
{% highlight c# tabtitle="Package Manager" %}
dotnet add package Syncfusion.Blazor.WordProcessor dotnet add package Syncfusion.Blazor.Themes dotnet restore
{% endhighlight %} {% endtabs %}
N> Document Editor are available on nuget.org. Refer to the NuGet packages topic for available NuGet packages list with component details.
{% endtabcontent %}
{% endtabcontents %}
Open ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.DocumentEditor namespaces.
{% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %}
@using Syncfusion.Blazor @using Syncfusion.Blazor.DocumentEditor
{% endhighlight %} {% endtabs %}
Now register the Syncfusion® Blazor Service in the ~/Program.cs file of your Blazor WebAssembly App.
{% tabs %} {% highlight C# tabtitle="Blazor WebAssembly App" hl_lines="3 11" %}
using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; using Syncfusion.Blazor;
var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add("#app"); builder.RootComponents.Add("head::after");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddSyncfusionBlazor(); await builder.Build().RunAsync();
{% endhighlight %} {% endtabs %}
Add the following stylesheet and script to the head section of ~/index.html file. The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Reference the stylesheet and script in the <head> of the main page as follows:
{% tabs %} {% highlight html tabtitle="~/index.html" %}
<script src="_content/Syncfusion.Blazor.WordProcessor/scripts/syncfusion-blazor-documenteditor.min.js" type="text/javascript"></script>{% endhighlight %} {% endtabs %}
N> Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.
Add the Document Editor component in the ~/Pages/Home.razor file.
{% tabs %} {% highlight razor tabtitle="~/Home.razor" %}
{% endhighlight %} {% endtabs %}
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Document Editor component in your default web browser. The output will appear as follows:
