officefileapi-403819-integration-guide-blazor-integration-use-word-document-api-within-a-blazor-server-app.md
This topic describes how to create a Blazor Server application that uses the Word Processing Document API to generate multiple business letters based on a template. Users can download these letters in PDF format or send them by e-mail.
View Example: Generate and Send Business Letters within a Blazor Server App
Create a new project in Visual Studio and select the Blazor Server App template. Specify the project name and location in the next window.
In the Additional information window, set the target framework to .NET 8.0 , interactive server mode to Server , and click Create.
Install the following DevExpress packages from the NuGet source:
DevExpress.Document.Processor This package includes the Word Processing Document API and other Office File API libraries. You need a license for the DevExpress Office File API Subscription or DevExpress Universal Subscription to use this package in production code.DevExpress.Drawing.Skia Contains the cross-platform drawing functionality based on the Skia Graphics Library.DevExpress.Blazor Contains DevExpress UI Components for Blazor. This product line is available as part of the DevExpress Universal, DXperience, or ASP.NET Subscription.
If you are new to NuGet packages, see the following installation guide for assistance: Install DevExpress Packages Using NuGet Package Manager.
Create a new SampleData.cs file within the Data folder.
Define a Recipient class to store information about recipients.
Create a Sender class to store information about senders.
Create lists of Recipient and Sender objects with sample data. These lists supply data for the app’s UI components.
Register the DevExpress.Blazor namespace in the _Imports.razor file.
Call the AddDevExpressBlazor method in the Program.cs file.
Apply the DevExpress Blazing Berry theme to the app as described in this help topic: Apply a DevExpress Bootstrap Theme. Open the App.razor file and add the following line to the end of the HEAD section:
Design the application UI. This app includes the following DevExpress Blazor UI components:
Open the Home.razor file and change its code as follows:
@page "/"
<div class="container">
<div class="card mt-3">
<div class="card-header">
Word (RTF) Mail Merge
</div>
<div class="card-body px-0">
<DxFormLayout>
<DxFormLayoutItem ColSpanMd="12">
<Template>
<p>
This example uses the Word Processing Document API
to generate personalized letters based on a template.
Select a sender and click <b>Send emails</b> to send
letters to all recipients. Click <b>Download</b> to
download a letter in PDF format for a specific recipient.
</p>
</Template>
</DxFormLayoutItem>
<DxFormLayoutItem Caption="From:" ColSpanMd="4">
<Template>
<DxComboBox Data="@dataSource.SenderList"
TextFieldName="FullName"
@bind-Value="@SelectedSender" CssClass="p-0" />
</Template>
</DxFormLayoutItem>
<DxFormLayoutItem>
<Template>
<DxButton Text="Send emails" />
</Template>
</DxFormLayoutItem>
</DxFormLayout>
<div class="col">
<DxGrid Data="@dataSource.RecipientList"
CssClass="mt-3" PagerVisible="false">
<Columns>
<DxGridDataColumn FieldName="@nameof(Recipient.ContactName)" Caption="Recipient" />
<DxGridDataColumn FieldName="@nameof(Recipient.Email)" Caption="Email" />
<DxGridDataColumn Caption="Attachment" Width="150px">
<CellDisplayTemplate>
@{
var recipient = context.DataItem as Recipient;
@if (recipient != null)
{
<DxButton Text="Download"
CssClass="btn-block"
Click="@((MouseEventArgs args) => DownloadPdf(recipient))" />
}
}
</CellDisplayTemplate>
</DxGridDataColumn>
</Columns>
</DxGrid>
</div>
</div>
</div>
</div>
@code {
SampleData dataSource = new();
Sender? selectedSender;
Sender? SelectedSender
{
get => selectedSender;
set { selectedSender = value;
InvokeAsync(StateHasChanged); }
}
protected override Task OnInitializedAsync()
{
selectedSender = dataSource.SenderList[0];
return base.OnInitializedAsync();
}
}
The Word Processing Document API fully supports mail merge operations. The API allows you to create multiple documents based on a single template. Execute the following actions to initiate mail merge within your app:
Specify a data source for mail merge. Open the SampleData.cs file and create a DataTable instance.
Implement the following method to populate the data table with values based on the selected sender and recipient:
Create a mail merge template. The template contains merge fields that are replaced with data source values during mail merge. You can download the following document to proceed: MailMerge.rtf. Add this file to the Data folder of your project.
Open the Index.razor file and add the following namespaces:
Create a RichEditDocumentServer instance and load the mail merge template.
Implement the following method to run mail merge. The output document is exported to PDF.
You can use JavaScript Interop to download generated letters in PDF format on the client side.
Create a wwwroot/js/exportToPdf.js file with the following JavaScript function:
Embed the script in the App.razor page before the closing </body> tag.
Inject an instance of the IJSRuntime object into the Index.razor page.
Handle the Click event of the Download button in the Attachment grid column. When a user clicks Download , the mail merge process is executed for the selected sender and recipient. The generated letter is exported to PDF and saved on the client.
You can upgrade your application to allow users to send generated letters by e-mail. This example uses the MailKit open source library to send e-mail messages.
Install the MailKit NuGet package.
Add the following namespaces to the Index.razor file and inject an ILogger object used to write error log messages:
Handle the Click event of the Send emails button.
See Also
Use the Spreadsheet Document API to Create a Loan Amortization Schedule within a Blazor Server App