How to Export HTML Node Using Blink Rendering to PDF in Vue Diagram?

Currently, we don’t have support to export the native and HTML nodes in the Vue Diagram. So, we are using the advanced Blink rendering engine from the Syncfusion Essential® PDF library. Please refer to the documentation link below to learn more about Blink rendering.

Documentation: 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 a Vue sample with an HTML node. Please refer to the documentation link below to render the HTML node.
   https://ej2.syncfusion.com/vue/documentation/diagram/shapes#html-node-with-template
2. Export the diagram on 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:

document.getElementById('export').onclick = () => {
 let htmlData: string = diagram.getDiagramContent();
 const url = 'https://localhost:44301/home/generatedocument';
 const headers = new Headers({
   'Content-Type': 'application/json',
 });

 const options = {
   method: 'POST',
   headers: headers,
   body: JSON.stringify({ Options: htmlData }),
 };

 fetch(url, options)
   .then((response) => {
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }
     return response.json();
   })
   .then((data) => {
     // Customize the path to be saved
     console.log(' Success, the PDF is exported at "E://test.pdf" ');
   })
   .catch((error) => {
     console.error('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("E://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 for export in Vue diagram

Server-side Sample:

Google drive link for Server side sample

Conclusion
I hope you enjoyed learning how to export an HTML node using Blink rendering to PDF in Vue Diagram.
You can refer to our Vue Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our Vue Diagram example to understand how to create and manipulate data.
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, Direct-Trac, or feedback portal. We are always happy to assist you!