How to print or export the HTML and Native node into image format in Blazor Diagarm?

We can export Blazor Diagram in the specified format like jpeg, png, SVG, and pdf file types. While exporting the diagram, the diagram will be drawn in a canvas, and then the canvas is converted to image format. Drawing HTML elements using SVG on a canvas and converting canvas to an image will cause security issues in the browser. So, we cannot provide in-build support to print or export HTML or native nodes into the image in the diagram.

However, we can achieve this by using the Syncfusion HTML to PDF converter library, which supports HTML Content to Image conversion using the Blink rendering engine. We can convert the diagram as an image by sending the diagram as HTML content to the library, which converts all graphics, images, texts, fonts, and the layout of the original HTML document or webpage into the image format.

Prerequisites and Setting up for conversion

A blazor server utility project is created, which requires the following things to convert the HTML content to image format.

• To convert HTML content to Images in the application using Blink rendering engine, Syncfusion.HtmlToPdfConverter.Windows NuGet package should be installed in this utility project.

In a utility project, the “ConvertImage” method of the ExportService is used to convert the HTML content into image format.

GetDiagramContent

Refer to the following code example to get the diagram content as a string.

C#

string diagramContent = await JS.InvokeAsync<string>("getDiagramContent", new object[] { elementID }).ConfigureAwait(true);

JavaScript

window.getDiagramContent = function getDiagramContent(elementID) {
var diagram = document.getElementById(elementID).innerHTML;
return diagram;
}

GetDiagramBounds

​Refer to the following code example to get the diagram bounds.

DiagramRect diagramBounds = DiagramInstance.GetPageBounds();

 You can use those two methods to get the HTML content and width and pass it as an argument to the ConvertImage method to get the diagram content as a base64 image.

ConvertImage

The following table explains the arguments needed for the ConvertImage method.

The “ConvertImage” method will return the “base64String” after converting the HTML content to an image.

Refer to the following code example.

ExportService exportService = new ExportService();
string diagramContent = await JS.InvokeAsync<string>("getDiagramContent", new object[] { elementID }).ConfigureAwait(true);
DiagramRect diagramBounds = DiagramInstance.GetPageBounds();
string base64Image = exportService.ConvertImage(diagramContent, Convert.ToInt32(diagramBounds.Width));

ExportImage

Refer to the following code example to export a base64 string as an image file.

C#

await JS.InvokeAsync<object>("download", new object[] { base64ImageString }).ConfigureAwait(true);

JavaScript

window.download = function download(base64Image) {
var el = document.createElement("a");
el.setAttribute("href", base64Image);
el.setAttribute("download", "diagram");
el.click();
el.remove();
}

You can download the complete working sample from here.

To know more about export, refer to the following link.

https://blazor.syncfusion.com/documentation/diagram/export

PrintImage

Refer to the following code sample to print a diagram content.

C#

await JsRuntime.InvokeAsync<string>("print", new object[] { elementID }).ConfigureAwait(true);

JavaScript

window.print = function print(elementID) {
var printContent = document.getElementById(elementID);
var WinPrint = window.open('', '', 'width=900,height=690');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}

You can download the complete working sample from here.