Export diagram as image do not work for HTML nodes

[Alexander Bondarew | Fenêtre bv]

Hi

I'm using diagram on VUE 3 with Asp Core

I have the following method for exporting diagram as image, my nodes are presented as HTML

saveAsImage(eventArgs: any) {

            const exportOptions = {

                mode: "Download",

                region: "PageSettings",

                multiplePage: false,

                fileName: this.templateTitle,

                pageHeight: 500,

                pageWidth: 500,

                format: "PNG",

            };

            this.diagramInstance.exportDiagram(exportOptions);

        },

The output image does not show the nodes, only arrows.
See attached file.

Attachment: 2024_10_22_164621_97ac28cc.zip

[Moulidharan Gopalakrishnan]

Hi Kuldeep,

Currently, we don’t have support to export the native and HTML nodes in the diagram. So, we are using the advanced Blink rendering engine from Syncfusion Essential PDF library to export the Diagram as Image. We have KB article on how to implement it. please refer the KB for guidance.


Client- side sample in Vue: G81et6 (forked) - StackBlitz

KB: How to export HTML node using blink rendering in JavaScript Diagram?


Regards,
Moulidharan

[Alexander Bondarew | Fenêtre bv]

Hi 

I did as you sent me in reply, but at the end nodes are not shown

So the actual output at my end is:


Expected result (screenshot from diagram):



In Samples.zip there are two files, one is what getDiagramContent function returns. Second one is my code snippets I tested.

I assume, that in my HTML-node has my own custom classes it it's content, like:

start-node shadow-node designer-node

somehow can be css included?

The provided sample from your reply is working with simple html, but not for extended html structure, with using bootstrap and custom css styling.

Attachment: Samples_4b7b5233.zip

[Moulidharan Gopalakrishnan]

Hi,

You can pass external stylesheets to the getDiagramContent method, which will return the diagram content along with your customizations of HTML nodes. To manually pass stylesheets, create an array of objects with rel='nofollow' href properties representing the stylesheet URLs, and cast it to a StyleSheetList-like type. This ensures compatibility with the method, which expects a StyleSheetList.

Please refer to the code – snippet and documentation below;

Documentation: https://ej2.syncfusion.com/vue/documentation/api/diagram/#getdiagramcontent

Code – snippet:

const customStyleSheets = [{ rel='nofollow' href: 'styles1.css' }, { rel='nofollow' href: 'styles2.css' }];

const diagramContent = diagram.getDiagramContent(customStyleSheets);

Regards,
Moulidharan G