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

You can export Blazor Diagram in specified formats such as JPEG, PNG, SVG, and PDF file types. During export, the diagram is drawn on a canvas, which is then converted to an image format. Drawing HTML elements using SVG on a canvas and converting it to an image may cause security issues in browser. Therefore, built-in support for printing or exporting HTML or native nodes as images in diagram is not available.

However, this can be achieved using the Syncfusion® HTML to PDF converter library, which supports HTML-to-image conversion using the Blink rendering engine. You can convert the diagram into an image by sending it 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 desired image format.

Prerequisites and Setup for Conversion:

Create a Blazor server utility project, which requires the following components to convert HTML content to image format:

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

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

GetDiagramContent

Refer to the following code example to retrieve the diagram content as a string:

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 retrieve the diagram bounds:

DiagramRect diagramBounds = DiagramInstance.GetPageBounds();

You can use these two methods to retrieve the HTML content and width, then pass them as arguments 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 learn more about export functionality, refer to the following link:

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

PrintImage

Refer to the following code sample to print diagram content:

C#

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

JavaScript

window.print = function print(elementID) {
    var printContent = document.getElementById(elementID).innerHTML;
    var WinPrint = window.open('', '', 'width=900,height=690');
    // Apply required styles (e.g., Syncfusion theme or custom CSS)
    WinPrint.document.write('<link rel="stylesheet" type="text/css" href="_content/Syncfusion.Blazor.Themes/bootstrap5.css">');
    WinPrint.document.write(printContent);
    WinPrint.document.close();
    WinPrint.onload = function () {
        setTimeout(function () {
            WinPrint.focus();
            WinPrint.print();
            WinPrint.close();
        }, 100);
    }
};

You can download the complete working sample from here.