How to export a Diagram to image Data, not download

[Gerson C Teixeira]

Hi.

I want to export a diagram to a stream, can I?.

I need to save the diagram in my DB like an image and not a serializable version, because my Diagram will not be modified anymore and after that, the image will be used in a report. I need to save like an image for persist my background image of diagram too. So ... can I get a stream version of then?

The " mode: 'Download' " is not an option, I need to save without user interaction at this point, everything must work after an simple button click.

I confess I don't understood the " mode: 'Data' " in ExportOptions, nothing happen when I use it.

Can you help me?

My version of SyncFusion components: 17.1.0.47

Thank you.

Attachment: diagram_ea1c9342.zip

[Shyam G]

Hi Gerson, 

 

Could you please confirm us the Node type(image, Native(SVG), HTML) that you are using in your application? So that we can provide how to stream the exported data in the server side. 

 

Regards, 

Shyam G 

[Gerson C Teixeira]

Hi

I'm using Basic and Path for shape type on my Nodes.

For shape type 'Path' I use SVG data.

I create my nodes at runtime, following yours docs example:

https://ej2.syncfusion.com/javascript/documentation/diagram/nodes/?no-cache=1#addremove-node-at-runtime

My export config is:




        var options = {};
        options.mode = 'Data';
        options.margin = {left: 10, right: 10, top: 10, bottom: 10};
        options.fileName = 'region';
        options.format = 'PNG';
        options.region = 'PageSettings';
        options.stretch = 'Stretch';
        this.diagramObj.exportDiagram(options);

Thank you.

[Shyam G]

Hi Gerson, 

We should set exportOptions mode as Data to get the base64 data. You can send it to the server and process further to convert it as a stream. We have created a sample in which we have shown how to get the base64 data from the exportDiagram method. Could you please check in the below sample? Still if you face any issue, please share us more details such as modify the below sample. 

Code example: 

function onselect(args) { 

    var exportOptions = {}; 

    exportOptions.format = args.item.text; 

    //set mode as data 

    exportOptions.mode = 'Data'; 

    exportOptions.region = 'PageSettings'; 

    exportOptions.fileName = 'Export'; 

    exportOptions.margin = { left: 0, top: 0, bottom: 0, right: 0 }; 

    //get the base64 data 

    var data = diagram.exportDiagram(exportOptions); 

    console.log(data); 

} 

Sample: https://stackblitz.com/edit/mhrmuh-jtpev6?file=index.js 

Regards, 

Shyam G 

[Gerson C Teixeira]

Thank you, that's exactly what I needed..

[Shyam G]

Hi Gerson, 

Thanks for your update. 

Regards, 

Shyam G 

[Hao]

Hi Gerson,

I'm having an issue with the exporting in ej2 diagram.

Here is my code:

initExportButton(){
    // @see https://www.syncfusion.com/forums/152236/how-to-export-a-diagram-to-image-data-not-download
    var button = '  Export Diagram '; 
    $('#Diagram').before(button);

    $('.export-diagram').on('click', function(){
        console.log('Exporting diagram');
        let exportOptions : IExportOptions = {};

        exportOptions.mode = 'Download';
        exportOptions.format = 'PNG';
        exportOptions.region = 'PageSettings';
        exportOptions.fileName = 'Export';
        NVCompanyOrgChart.diagram.exportDiagram(exportOptions);
    });
}

I got this error message in the console:

dom-util.js?c544:787 Uncaught TypeError: Cannot read property 'getElementsByClassName' of null

    at getHTMLLayer (dom-util.js?c544:787)

    at DiagramRenderer.renderFlipElement (renderer.js?bc6c:1435)

    at DiagramRenderer.renderContainer (renderer.js?bc6c:1397)

    at DiagramRenderer.renderElement (renderer.js?bc6c:160)

    at Diagram.renderDiagramElements (diagram.js?19be:6222)

    at PrintAndExport.diagramAsCanvas (print-settings.js?06fe:480)

    at PrintAndExport.setCanvas (print-settings.js?06fe:119)

    at PrintAndExport.exportDiagram (print-settings.js?06fe:65)

    at Diagram.exportDiagram (diagram.js?19be:4006)

    at HTMLButtonElement.eval (NVCompanyOrgChart.ts?e2e1:170)

Can you please tell me what is wrong in my code? 

Thanks a lot.

Hao

[Arunkumar Manoharan]

Hi Gerson,  

On analyzing the provided image, you have tried to export the diagram with html temple. In the diagram, HTML node template cannot be exported to image format, like JPEG, PNG, and BMP.  

By default, in the diagram, we do not have support to export the Native/SVG, HTML node or template annotation as JPG, PNG, BMP. Since while exporting, the diagram will be drawn in a canvas, and then canvas is converted to image format. Currently, drawing in a canvas equivalent from all possible HTML is not feasible and rendering the SVG content in a canvas and convert canvas to image will get the security issues in IE browser. 

We have already mentioned this limitation in our documentation. Please refer below link  

UG link: https://ej2.syncfusion.com/javascript/documentation/diagram/shapes/#htmlNative  

However, by using the Syncfusion Essential PDF library, which supports HTML Content to Image conversion by using the advanced Qt WebKit rendering engine, we can export the HTML node. We have already prepared a KB for How to print or export the HTML and Native node into image format. So, by using the KB you can able to export the diagram with html template. Please find the KB in below link  

KB: https://www.syncfusion.com/kb/10213/how-to-print-or-export-the-html-and-native-node-into-image-format 

Regards,
Arun 

[Hao]

Hi Arunkumar,

You're right. I'm trying to export diagram HTML Node. I understand the limitations now.

Thanks for your excellent and quick support. I'll consider Syncfusion Essential PDF.

Hao

[Gowtham Gunashekar]

Hi Gerson, 

 

Thanks for your update. Please let us know whether you need any further assistance on this. 

 

Regards, 

Gowtham 

[Hans-Georg Haberl]

I thinkt this limitation should be removed since IE is dead (at least not supported anymore)
Edge uses Chromium ;)

Is there any chance to allow rendering svg, html in the near future?

This is a requirement for us.

Edit: Created a Feature request for it

https://www.syncfusion.com/feedback/35795/since-ie-is-deprecated-and-replaced-by-edge-please-allow-printing-exporting-of

[Shyam G]

Hi Hans,

We have an getDiagramContent method which is used to get the diagram DOM element as a string along with all dependent stylesheets. We should pass this HTML in the server side and convert it to image using QTbinaries. Please refer to the below KB for more details. Also, please let us know if you face any problems in converting HTML to Pdf. Also, please let us know if you need a sample for it.

https://www.syncfusion.com/kb/13298/how-to-print-or-export-the-html-and-native-node-into-image-format

Regards,

Shyam G