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:
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.
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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!