Mail merge is a process of merging data from a data source into a Word document template. You can quickly generate reports like invoices and payroll by performing a mail merge in a batch process. Then, you can save the generated reports in Word, PDF, HTML, and other formats. In this blog, we’ll see how to easily create a Word document template using the Syncfusion Angular Word Processor and perform mail merge on the server side to generate reports.
Angular Word Processor is a user interface web component. It allows you to interactively draft, edit, view, and print Word documents in a web app. It provides all the standard Word processing features, including editing text, formatting contents, resizing images and tables, finding and replacing text, generating tables of content, and more. It works independently without Microsoft Word or Office interop dependencies.
Note: If you are new to our Angular Word Processor, please refer to its getting started documentation before proceeding.
Create a Word document template using Angular Word Processor
To generate reports, first, we need to create the Word document template. The Angular Word Processor has an intuitive UI to create a Word document template with merge fields in your web app.
The Word Processor displays the list of valid merge fields based on the JSON data we upload. You can upload JSON data using the Choose File option in the top left side of the UI. The mail merge fields list includes the group start and end fields that are required for performing a group mail merge.
You can drag and drop the required fields from the list, and they will be automatically inserted as merge fields in the Word document template. This allows the end user to design a mail merge Word document template in a few minutes.
Now you can draft, edit, and export the mail merge Word document template based on your needs.
Refer to the following GIF image.
Preview the results as individual documents for each record
Once the mail merge Word document template is created, you can preview the results for all records with an interactive navigation option.
You can preview the results by choosing the Preview Results option in the Mail Merge dropdown in the toolbar.
Refer to the following image.
By default, Word Processor will preview the resultant document generated for the first record. You can also preview the report for all records with the page break added after each record.
Refer to the following image. Here, you can see the previous and next buttons available in the title bar for easy navigation between each record, just like in Microsoft Word.
You can also save the resultant document for each record as individual files by enabling the Download as individual files checkbox and clicking the Download button in the title bar.
Performing mail merge in Angular Word Processor
The mail merge process in Angular Word Processor involves the following steps:
- The JSON data and template document (DOCX file) passes from the client-side Word Processor to the server side.
- The mail merge operation is performed on the template document on the server side using the .NET Core mail merge engine.
- The final report will be saved in SFDT format and sent back to the client side.
- Now, the SFDT-format file of the final report will be opened in the Angular Word processor.
Now, you can generate the final report as a single document with a page break added after each record by choosing the Merge & Finish option in the Mail Merge dropdown in the tool bar.
Refer to the following image which displays the final report after performing a mail merge in the Angular Word Processor.
Note: Refer to the mail merge feature in Angular Word Processor documentation for more details.
Also, refer to the complete working example for mail merge in Angular Word Processor on GitHub.
Thanks for reading! In this blog, we have seen how to quickly generate reports using the mail merge feature in the Syncfusion Angular Word Processor. Try out this feature to generate reports in a batch process with ease and leave your feedback in the comments section below!