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

This article explains how to export an HTML node using Blink rendering to PDF in Angular. Currently, we don’t have support to export native and HTML nodes in the diagram. So, we are using the advanced Blink rendering engine from the Syncfusion Essential® PDF library. Please refer to the documentation link to know more information about Blink rendering.

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 documentation to render the HTML node.
2. Export the diagram with 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 to the link.
2. Install Syncfusion.HtmlToPdfConverter.Net.Windows NuGet package as a reference to your .NET Standard applications from NuGet.org.
3. A default controller with the name HomeController.cs is added upon the creation of an ASP.NET Core project. Include the following namespaces in the 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: sample

Server-side Sample: sample

Conclusion

We hope you enjoyed learning how to export HTML node using blink rendering to PDF in Angular.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!