Articles in this section
Category / Section

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

6 mins read

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:

Nuget reference

 

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:

Arguments

Description

htmlContent

Pass an HTML content, which needs to be converted into an image format.

width

Horizontal overflow is not supported in the converter. So that if the Diagram width exceeds the document width, it cannot be paginated to the next page. To overcome this, you must adjust the horizontal viewport of the Converter.

 

This argument can be used to adjust the horizontal viewport of the Blink Converter.

 

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);
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.

Conclusion:

We hope you enjoyed learning how to print or export the HTML and Native nodes into image format.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features. You can also explore our Blazor Diagram documentation to understand how to present and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.


If you have any questions or require clarifications, please let us know in comments below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!


Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied