Articles in this section
Category / Section

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

8 mins read

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.

Nuget reference

 

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.

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

Conclusion

I hope you enjoyed learning about how to print or export the HTML and Native node into image format.

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

For current customers, you can check out our Blazor 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 Blazor Diagram and other Blazor components.


If you have any queries 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