How to export HTML node using blink rendering to PDF in Angular?

Currently, we don’t have support to export the native and HTML nodes in the diagram. So, we are using the advanced Blink rendering engine from Syncfusion Essential® PDF library. Please refer the below documentation link to know more information about blink rendering.
https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/blink

In this process, we transform HTML data into PDF format using the Blink rendering engine. The Blink rendering code is managed on the server-side, while on the client-side, we employ a Fetch API call to transmit the data from the client to the server.

The following steps demonstrate how to export data from the client-side using a button.

1. Create an angular sample with an HTML node. Please refer below documentation link to render the HTML node.
   https://ej2.syncfusion.com/angular/documentation/diagram/shapes#html-node-with-template
2. Export the diagram in a button click. Use the getDiagramContent() method to obtain the HTML or structured data of the diagram content.
3. Use the Fetch API to send a POST request to a specific URL on the server-side, such as ‘http://localhost:49807/home/generatedocument’. Pass the HTML data from the diagram as a JSON payload.

Here’s a code sample for the client-side:

onclick(){

 let htmlData: string = this.diagram.getDiagramContent();
 const url = 'https://localhost:44301/home/generatedocument'; 
 const headers = new HttpHeaders({
   'Content-Type': 'application/json'
 });
 const options = { headers: headers };
 const requestData =JSON.stringify({ Options: htmlData });
 this.http.post(url, requestData, options)
 .subscribe(
   (result: any) => {
     console.log('success', result);
   },
   (error: any) => {
     console.log('error', error);
     // Handle errors here
   }
 );

}

Server Side:

1. Create a new C# ASP.NET Core Web Application project. To create a .NET core application, refer the below link:
   https://ej2.syncfusion.com/aspnetcore/documentation/diagram/getting-started
2. Install Syncfusion.HtmlToPdfConverter.Net.Windows NuGet package as reference to your .NET Standard applications from NuGet.org.
3. A default controller with name HomeController.cs gets added on creation of ASP.NET Core project. Include the following namespaces in that HomeController.cs file.
4. Add a new action method named GenerateDocument in your controller to handle the POST request from the client. This action converts the HTML content to a PDF document using the Blink rendering engine.

[HttpPost]
public ActionResult GenerateDocument(string Options)
{
 HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter();
 BlinkConverterSettings blinkConverterSettings = new BlinkConverterSettings();
 //Set Blink viewport size.
 blinkConverterSettings.ViewPortSize = new System.Drawing.Size(1280, 0);
 //Assign Blink converter settings to HTML converter.
 htmlConverter.ConverterSettings = blinkConverterSettings;
 //Convert URL to PDF document.
 PdfDocument document = htmlConverter.Convert(Options,string.Empty);
 //Create memory stream.
 MemoryStream stream = new MemoryStream();
 //Save the document to memory stream.
 document.Save(stream);
 System.IO.File.WriteAllBytes("d://test.pdf", stream.ToArray());
 return File(stream.ToArray(), System.Net.Mime.MediaTypeNames.Application.Pdf, "HTML-to-PDF.pdf");
}

How to run the sample:

1. Download the server-side sample.
2. Extract and open it in Visual Studio, then run the sample.
3. Next, access the client-side StackBlitz link.
4. Click the “Export” button on the client side to initiate the diagram export process.

Client-side Sample:

Client side sample

Server-side Sample:

https://drive.google.com/file/d/17FLtB3k3F4n28Mf-iio_ehwdZ8nU7kTJ/view?usp=sharing