Adding html elements to diagram control

[john taylor]

Is it possible to add html elements to diagram control? I want to add things like labels, div, and button to interact with the diagram control. I am currently working in an angular platform version of your diagram. Also, I would want to have these elements ti get included to json object when diagram is save.

Thanks

[Ramya Thirugnanam]

Hi John, 

 

We have created a simple sample with label, button and div element as part of the Node. Please find the sample from the below link. 

 

Sample link:
Angular-EJ2-HTML_Shapes
 

  

We can save the diagram that has HTML objects as JSON . 

 

 

For more details about shape of Node, please refer to the below help documentation  link. 

 

Link: https://ej2.syncfusion.com/angular/documentation/diagram/shapes#html 

 

 

 

Regards, 

Ramya T 

[Kannan T]

Hi Ramya,

Thank you for this sample. I've similar requirement.

Could you please provide the same sample application in angular/typescript using DiagramComponent, NodeModel etc.

I'm following this sample https://ej2.syncfusion.com/angular/demos/#/material/diagram/nodes.

Thanks & Regards,

Kannan

[Ramya Thirugnanam]

Hi Kannan, 

 

We have added the HTML shape to Nodes application . Please find the sample in angular as below. 

 

Sample link:
Angular-EJ2-HTML_Shapes 

  

Please use the below code example to create basic node using NodeModel. 

 

let node: NodeModel = { 

id: 'node1', width: 300, height: 160, offsetX: 250, offsetY: 180, annotations: [{ content: 'Node'}]; 

}; 

 

 

 

Regards, 

Ramya T 

[Kannan T]

Hi Ramya,

Thank you for the sample. It works. I've modified the sample (content) like this,

{

id: 'HTML6', borderColor: 'black', borderWidth: 1, offsetX: 200, offsetY: 400, height: 100, width: 100,

annotations: [ { content: 'Button'}],

shape: {

type: 'HTML',

// content: '<button type="button" style="width:100px"> Button</button>'

content: '<div style="height:100%;width:100%;border:none; background-color:white; "><img src="./app/diagram/diagram/Nodes_1.png" width=100 height=100/><div style="position: absolute;left: 80px;top: 20px;"><img src="./app/diagram/diagram/Nodes_2.png" width=20 height=20/></div><div style="position: absolute;left: 5px;top: 20px;"><img src="./app/diagram/diagram/Nodes_3.png" width=20 height=20/></div><div style="position: absolute;left: 40px;top: 80px;"><img src="./app/diagram/diagram/Nodes_4.png" width=20 height=20/></div></div>'

}

},

The content have more than one images. Is it possible to add binding in the content? My requirement is like based on some properties, need to hide/show the small images at runtime.

Also is it possible to move the content code to some other html file and give the reference here? Thank you !

Regards,

Kannan

[Ramya Thirugnanam]

Hi Kannan,   

Requirement : Using some properties, need to hide/show the small images at runtime with data binding.  

We have created a simple sample to represent the requirement. Please refer to the sample from the following link.   

Sample link:  
Angular-EJ2-HTML_Shapes-Binding
 

  

This sample explains the binding with properties using class.  

 

HTML Binding: 

We have provided binding using HTML also and please refer to the below code example. The “ngAfterViewInit” method will be only effective when Diagram is rendered. 

 

To create HTML element (button): The below div should be defined before diagram div.	<div id='button_div' style="height:100%;width:100%;border:none; background-color:white;"><img src="./app/diagram/diagram/Nodes_1.png" width="100%;height:50px"/></div>
Angular : To get the button and show as content of the Node	ngAfterViewInit(): void {   let node: NodeModel = this.diagram.nodes[6];   //  ‘button_div’ id of div which want to show as content of node.   node.shape = { type: 'HTML', content: document.getElementById('button_div') };   this.diagram.dataBind();   }

  

Regards,  

Ramya T  

[Kannan T]

Hi Ramya,

Thank you for that sample. It works.

I've modified that example. Now it has two shapes (which is an image). Each shape have another small circle shape on the right top which is also an image.

I'm using binding to set the visibility of the small image. For the first shape, the small image is visible and for the second one, the small image is set as hidden.

This works fine with binding.

Now I've added a button. On click of the button, I'm trying to set visible for the small image of the second shape. But it is not enabling. Could you please help me? I've uploaded the modified sample.

Regards,

Kannan

Attachment: AngularEJ2HTML_ShapesBinding_c321fe31.zip

[Kannan T]

Hi Ramya,

Also I tried export, but it is not exporting. In the above example, I've added one more button Export Diagram. Please check it. Attached the sample code. Thank you !

Regards,

Kannan

Attachment: AngularEJ2HTML_ShapesExport_2056a638.zip

[Ramya Thirugnanam]

Hi Kannan, 

 

Diagram have exporting support whereas the html/native nodes will not be exported. To export the diagram, we need to inject the export module. Please find the modules injection in diagram as below. 

 

Link: https://ej2.syncfusion.com/documentation/diagram/getting-started 

 

However, we have workaround to export the html/native nodes in diagram. Please find the kb document as below. 

 

KB: https://www.syncfusion.com/kb/8160/export-html-native-node-into-image-format 

 

We have confirmed that the export html/native nods as image format as feature request and logged feature report. This feature will be estimated to be available in our Service pack 1 of Volume 4 2018 release which is tentatively scheduled on end of February 2019. 

 

Regards, 

Ramya T 

[Kannan T]

Hi Ramya,

Thank you for that sample. It works.

I've modified that example. Now it has two shapes (which is an image). Each shape have another small circle shape on the right top which is also an image.

I'm using binding to set the visibility of the small image. For the first shape, the small image is visible and for the second one, the small image is set as hidden.

This works fine with binding.

Now I've added a button. On click of the button, I'm trying to set visible for the small image of the second shape. But it is not enabling. Could you please help me? I've uploaded the modified sample.

Regards,

Kannan

Attachment: AngularEJ2HTML_ShapesBinding_c321fe31.zip

Hi Ramya,

      May I know how to solve this issue?

Regards,

Kannan

[Ramya Thirugnanam]

Hi Kannan, 

 

The node can’t be created using tag in angular since we are using complex shapes. However, we have modified the sample (work around) to create the node suing binding. Please refer to the sample from the below link: 

 

 

Sample Link:
AngularEJ2HTML_Shapes
 

 

We have modified the sample for HTML6 node. 

 

Feature information:  

We will provide method to refresh the diagram templates which will replace the provided work around for binding. This feature will be available in our Service pack 1 of Volume 4 which is tentatively scheduled on end of February 2019. 

 

 

Regards, 

Ramya T 

[Kannan T]

Hi Ramya,

Yes, it works. Thank you. So, we need to reset the content property of the node to make it work, like this,

for (let i = 0 ; i < nodes.length ; i++) {

template = (nodes[i].shape as HtmlModel).content;

(nodes[i].shape as HtmlModel).content = '';

(nodes[i].shape as HtmlModel).content = template;

}

I think my understanding is correct. Thanks !

Also I noticed another behavior after zooming the browser. After zooming and on click of show image button, the small image is not shown. I've attached the screen shot.

Regards,

Kannan

[Ramya Thirugnanam]

Hi Kannan, 

 

The Show or hide image functionality is working fine (2^nd node) with zoom in and zoom out. We have provided video to represent this. Please refer to the video as below. 

 

Video link:
Zooming_-_Behaviour
 

 

Regards, 

Ramya T 

[Kannan T]

Hi Ramya,

I followed the link you have send to export html node to image.

I installed the qt webkit through nuget (Syncfusion.HtmlToPdfConverter.QtWebKit.Net.Core)

But I couldn't find the class DiagramExportingUtility.

May I know where I'm wrong? Do you have any sample project?

Regards,

Kannan

[Ramya Thirugnanam]

Hi Kannan, 

 

 

Please attach the exporting utility project to Asp.Net web application. The exporting utility can be found after extracting the below sample which was given in the shared Kb link. 

 

Utility location: 

 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/7z/191077-1436035692 

 

 

Regards, 

Ramya T 

[Kannan T]

Hi Ramya,

Thank you for the sample code. It works.

As I've already mentioned with the sample code on November 23, 2018 01:32 PM, I'm are using angular diagram component. I couldn't find the method getDiagramContent in the DiagramComponent or any other similar method or property. May I know whether this is supported in angular?

Regards,

Kannan

[Ramya Thirugnanam]

Hi Kannan,     

     

Requirement: print and export the html nodes     

 

Please use the below steps and sample to resolve the issue. 

  

We can convert HTML Node to image format using webkit based Html converter.  Please refer to KB link for more details  

  

KB link: https://www.syncfusion.com/kb/8161/export-html-native-node-into-image-format  

  

·        We have created an Angular sample and ASP.NET web forms sample.    

·        The asp.net web forms sample required to convert Diagram content to base64 data using webkit rendering engine.  

·        You can run the sample in browser to check locally or host in IIS and specify that URL in ajax post which is in angular sample(for example: $.ajax({ url: " http://localhost:65181/Diagram/DiagramFeatures.aspx/GenerateDocument",})). Please refer to the code example below which show how to send data from client side to server side.  

  

Code example for angular:   

               

function exportHTMLContent() {  

        var diagram = $("#diagramCore").ejDiagram("instance");  

    // get the diagram content  

        var htmlData = diagram.getDiagramContent();  

    // get the diagram bounds  

        var size = diagram.getDiagramBounds();  

        var jsonResult = { htmlData: { htmlData: htmlData, width: size.width } };  

        $.ajax({  

          type: "POST",  

          url: "http://localhost:65181/Diagram/DiagramFeatures.aspx/GenerateDocument",  

          crossDomain: true,  

          contentType: 'application/json; charset=utf-8',  

          dataType: 'json',  

          data: JSON.stringify(jsonResult),  

          traditional: true,  

          async: false,  

                      });  

      }   

  

 ASP.NET web form sample:  

  

[WebMethod]  

        public static object GenerateDocument(object htmlData)  

        {  

            Dictionary<string, object> htmlContent = (Dictionary<string,object>)htmlData;  

            // set the QTBinaries path  

            string qtBinariesPath =HttpContext.Current.Server.MapPath("~/App_Data/QtBinaries");  

            DiagramExportingUtility diagram = new DiagramExportingUtility();  

            // convert the html content to base64String image format.  

            return diagram.ConvertImage(htmlContent["htmlData"].ToString(),Convert.ToInt32(htmlContent["width"]), qtBinariesPath);  

        }   

        

·        In asp.net sample, we get a diagram HTML data from client side and process it as an base64 data. Further, we send that data to client side(refer angular sample).   

·        In client side, you can pass that base64data in our diagram exportImage method to export that content into image. please refer to help documentation for exportImage method.  

  

 Code example for Angular:  

  

      $.ajax({  

      . . . . . .   

     success: function (data) {  

     // export the image into different format with certain export option.  

      diagram.exportImage(data.d, { fileName: "diagram", format: "png", region: "content" });  

      },  

   });   

  

  

Help documentation: https://help.syncfusion.com/api/js/ejdiagram#methods:exportimage  

  

Angular sample: http://www.syncfusion.com/downloads/support/directtrac/general/7z/EJ1-Angular-Swimlane-529870812  

  

ASP.NET web sample:http://www.syncfusion.com/downloads/support/directtrac/general/7z/webkitsample-1847581763   

   

Regards,  

Ramya T  

[Kannan T]

Hi Ramya,

Thank you for the detailed explanation. Appreciate.

In the previous reply, I got the below code,

function exportHTMLContent() { 

 

        var diagram = $("#diagramCore").ejDiagram("instance"); 

 

         // get the diagram content

         var htmlData = diagram.getDiagramContent(); 

 

         // get the diagram bounds

         var size = diagram.getDiagramBounds(); 

 

which is written in <script type="text/javascript">.

Also you have defined the component for the diagram as below,

export class AppComponent { @ViewChild('diagram') diagram: EJComponents<any, any>; nodes: Array<any>; connectors: Array<any>;

...

}

So I need getDiagramContent() and getDiagramBounds() through diagram: EJComponents. Is this possible in angular/typescript?

Also in the app.component.html I saw the diagram code as,

<ej-diagram #diagram id="diagramCore" width="100%" height="1000px"                [nodes]="nodes" [connectors]="connectors" [tool]="tool" [snapSettings]="snapSettings">

</ej-diagram>

But I'm using the below diagram component,

<ejs-diagram #diagram id="diagram" width="100%" height="469px"

                 [nodes]="nodes" [connectors]="connectors"

                 [snapSettings]="snapSettings" [contextMenuSettings]="contextMenu"

                 [selectedItems]='selectedItems' [getCustomCursor]='getCursor'

                 (created)="diagramCreate($event)" (dragEnter)="dragEnter($event)" (contextMenuOpen)="contextMenuOpen($event)"

                 (contextMenuClick)="contextMenuClick($event)" (doubleClick)="diagramDoubleClick($event)">

and angular component is,

@ViewChild('diagram') private diagram: DiagramComponent;

May I know which is latest? ej-diagram or ejs-diagram? EJComponents or DiagramComponent. Thank you !

Regards,

Kannan

[Ramya Thirugnanam]

Hi Kannan, 

 

The ej-diagram is an EJ1 Angular diagram and ejs-diagram is an EJ2 angular diagram component. EJ2 diagram component is a latest one. We don’t have support to export HTML content in EJ2 diagram component and it will be available in our volume 1,2019 release which is tentatively scheduled on mid of March 2019. 

 

We have support to export HTML content in EJ1 diagram component by using previously shared steps. Please refer to below code example which shows how to get getDiagramContent and getDiagramBounds methods in EJ1 angular diagram component. 

 

Code example: 

ngAfterViewInit() { 

// get the diagram content 

      this.diagram.widget.getDiagramContent(); 

 // get the diagram bounds 

      this.diagram.widget.getDiagramBounds(); 

} 

 

 

 

Regards, 

Ramya T 

[Kannan T]

Hi Ramya,

Is there any workaround to export diagram having html nodes in EJ2 diagram?

Regards,

Kannan

[Ramya Thirugnanam]

Hi Kannan, 

 

Requirement: Print and Export the html nodes of Diagram. 

 

Currently, we don’t have support to achieve this requirement. We have already considered this feature for our Volume 1 2019 release which is tentatively scheduled on mid of March 2019. 

 

Additional information: 

Please use browser printing for printing the html nodes . But, this work around will help only with viewport part of the Diagram. 

 

Regards, 

Ramya T 

[Kannan T]

Hi Ramya,

Is there any way to get the HTMLCanvasElement of the diagram?

Regards,

Kannan

[Shyam G]

Hi Kannan, 

 

Could you please confirm us whether you need to get an dom element of canvas? If so, by default, the diagram will be rendered in SVG mode. You can get an canvas element only when a diagram rendered in canvas mode. Please let us know why you need to get an HTMLCanvasElement of diagram, so that we can validate and provide an solution for it. 

 

Regards, 

Shyam G 

[Kannan T]

Hi Shyam,

I want to export the diagram which has html nodes (which I've discussed before in this thread). But syncfusion is not directly supporting export. So if I get the canvas, I can convert it into image and save.

For example like this,

var canvas = this.diagram.diagramCanvas as HTMLCanvasElement; // Something like this

var img = canvas.toDataURL("image/png", "");

Please check this link,

https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf

Regards,

Kannan

[Ramya Thirugnanam]

Hi Kannan, 

 

We can export the Print/Export the diagram HTML node using webkit alone. Since, We does not render the HTML node inside the HTML canvas element and we have rendered the HTML node in the separate div.  The support for “Print /Export HTML Node”  has been released in the version 17.1.1-beta.  Please find the release information as below. 

 

Please find our Essential JavaScript 2 patch release (v17.1.1-beta) and In that release, we have added the requirement “Print /Export HTML Node “.Please upgrade to the latest version packages to make use of this feature.   

 

https://www.npmjs.com/package/@syncfusion/ej2-diagrams 

 

Documentation: 

 

We are working on documentation for this support and it will get published on February 13^th 2019. We have provided drafted version of document to print and export the html node.  please refer to the document as below. 

 

Document: Print/Export-HTML-Node 

 

Regards, 

Ramya T 

[Kannan T]

Hi Ramya,

Nice to hear this. As you have mentioned in the Exporting-KB document, I've installed latest syncfusion diagram like this,

npm install @syncfusion/ej2-diagrams

As mentioned in the document, I've added the below code to export,

var diagram = document.getElementById("diagram").ej2_instances[0];

But I'm getting the error like "ej2_instances does not exist on type HTMLElement".

I've attached the sample code which I've tried. It will be a great help, if you could fix this export issue in the same sample (because the example you have provided in that document is not angular/typescript and also not ej2 diagram).

Regards,

Kannan

Attachment: Angular_EJ2_HTML_Node_Shapes_Export_373fc3a7.7z

[Ramya Thirugnanam]

Hi Kannan,  

 

It seems that older packages (ej2-ng-diagrams) of diagram is used in your application. So, we have changed it in to newer packages (ej2-angular-diagrams) to resolve the sample side reported issue. These getDiagramBounds and getDiagramContent method only available in latest packages.  Now, you can get the diagram content and diagram bounds from diagram. Please use the ASP.Net sample to export the image as mentioned in document. 

 

We have attached the sample with latest packages. Please find the sample in below link 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Diagram-HTMLShapes-1212343309  

 

Regards 

Ramya T 

[Kannan T]

Hi Ramya,

Thank you. I downloaded the sample which you have attached in the previous post.

Added the one line code to log the htmlData to console in the below code,

public exportDiagramClick(args: Object) {

    let htmlData: string = this.diagram.getDiagramContent();

    console.log(htmlData);

    let size: Rect = this.diagram.getDiagramBounds();

    let jsonResult = { htmlData: { htmlData: htmlData, width: size.width } };

  }

* Opened in visual studio

* Added the above code changes

* Did npm install

* Did npm start

When I clicked Export, the below line is written in the console (for htmlData). Is this correct?

{"notifyType":"consoleItemLog","message":{"message":"","styles":"","hasFormatString":true,"fileUrl":"http://localhost:4200/main.js","lineNumber":297,"columnNumber":9}}

Regards,

Kannan

[Ramya Thirugnanam]

Hi Kannan, 

 

The getDiagramContent usually returns a string as shown in below video. But, it seems the your data is inappropriate. We have attached a video for your reference. 

 

Video: HTML-Content   

 

When you set diagram width or height in percentage means for e.g (100%) the diagram is clipped. We have fixed this issue and the patch will be released in next patch release on February 20^th  2019. So, please set diagram width and height in pixel. 

 

Regards 

Ramya T 

[Kannan T]

Hi Ramya,

I too tried the same sample application. But in my system it is coming as empty. Attached the screen shot. Any idea why?

Regards,

Kannan

Attachment: Screen_Shot_ba5f3f3f.7z

[Ramya Thirugnanam]

Hi Kannan, 

 

The diagram component is divided into individual feature-wise modules. To use a feature, inject the required module. 

 

For printing and exporting, please inject PrintAndExportService module. Please refer to the code example as below. 

 

Code example: 

File : App.module.ts 

 

import { 

DiagramModule,  PrintAndExportService 

} from '@syncfusion/ej2-angular-diagrams'; 

 

 

Please refer to the following help documentation link for module injection. 

Module injection: https://ej2.syncfusion.com/angular/documentation/diagram/getting-started/?no-cache=1#module-injection 

 

 

Regards, 

Ramya T 

[Kannan T]

Hi Ramya,

The client side the html data is coming correctly. But in the server side (web api with asp .net core), I'm getting this error,

System.IO.FileNotFoundException

  HResult=0x80070002

  Message=Could not load file or assembly 'Syncfusion.Pdf.Base, Version=15.3451.0.29, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89'. The system cannot find the file specified.

  Source=ExportingUtility

  StackTrace:

   at ExportingUtility.DiagramExportingUtility.ConvertImage(String htmlContent, Int32 viewPortWidth, String webKitPath) in C:\LPITFS\HTML5_PI\PI.Light\Service\PI.Utility.Exporting\DiagramExportingUtility.cs:line 38

   at PIWeb.Service.WebAPI.Controllers.PfdController.Get(String html, Int32 width) in C:\LPITFS\HTML5_PI\PI.Light\PI.Light\Controllers\PfdController.cs:line 72

   at Microsoft.Extensions.Internal.ObjectMethodExecutor.Execute(Object target, Object[] parameters)

   at Microsoft.AspNetCore.Mvc.Internal.ActionMethodExecutor.SyncObjectResultExecutor.Execute(IActionResultTypeMapper mapper, ObjectMethodExecutor executor, Object controller, Object[] arguments)

   at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.d__12.MoveNext()

In the server side I'm using the same project. This happens when executing the below line,

HtmlToPdfConverter converter = new HtmlToPdfConverter(HtmlRenderingEngine.WebKit);

May I know why this happens?

Regards,

Kannan

[Kannan T]

Hi Ramya,

This I've fixed by adding the same Syncfusion.Pdf.Base.dll from the sample. Now again I'm getting the following error,

System.BadImageFormatException

  HResult=0x80131058

  Message=Could not load file or assembly 'System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'. Reference assemblies should not be loaded for execution.  They can only be loaded in the Reflection-only loader context. (Exception from HRESULT: 0x80131058)

  Source=Syncfusion.HtmlConverter.Base

  StackTrace:

   at Syncfusion.HtmlConverter.WebKitConverterSettings..ctor()

   at Syncfusion.HtmlConverter.HtmlToPdfConverter..ctor(HtmlRenderingEngine renderingEngine)

   at ExportingUtility.DiagramExportingUtility.ConvertImage(String htmlContent, Int32 viewPortWidth, String webKitPath) in C:\LPITFS\HTML5_PI\PI.Light\Service\PI.Utility.Exporting\DiagramExportingUtility.cs:line 19

   at PIWeb.Service.WebAPI.Controllers.PfdController.Get(String html, Int32 width) in C:\LPITFS\HTML5_PI\PI.Light\PI.Light\Controllers\PfdController.cs:line 72

   at Microsoft.Extensions.Internal.ObjectMethodExecutor.Execute(Object target, Object[] parameters)

   at Microsoft.AspNetCore.Mvc.Internal.ActionMethodExecutor.SyncObjectResultExecutor.Execute(IActionResultTypeMapper mapper, ObjectMethodExecutor executor, Object controller, Object[] arguments)

   at Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker.<InvokeActionMethodAsync>d__12.MoveNext()

Inner Exception 1:

BadImageFormatException: Cannot load a reference assembly for execution.

Regards,

Kannan

[Ramya Thirugnanam]

Hi Kannan, 

 

We have modified your sample for exporting. In the ASP.Net sample also we have modified some changes and change all the dll to new version. These are the dll required to run the ASP.Net sample 

 

Syncfusion.EJ 

Syncfusion.EJ.Web 

Syncfusion.HtmlConverter.Base 

Syncfusion.Pdf.Base 

 

All the dll must be in same version. In the Exporting utility project there is a folder called QTBinaries. These folders also must be in same version of dll. So how to install these QTBinaries is mentioned in the How to export HTML node document which is shared in our previous update. If there is any old QTBInaries present in AppData folder please delete that. 

 

The image does not shown while exporting if your requirement is to use the image as url with https address. This is due to security purpose. Please add the below mentioned assemblies in windows system folder If you want to export those image. 

 

libeay32.dll 

libssl32.dll 

ssleay32.dll 

 

 

For more information about prerequisites for windows please refer to the below help documentation link. 

 

Documentation : https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/webkit#prerequisites-for-windows   

 

We have modified your sample. Please find the sample in below link 

 

Angular Application: HTML-Shapes 

 

ASP.Net sample: ASP.Net-Sample 

 

Regards, 

Ramya T 

[Kannan T]

Hi Ramya,

Thank you for that sample. In that sample you have used asp.net. But we are using asp.net core with web api.

Still I'm facing dll issues. I've attached a sample project using asp.net core. Could you please correct it and resend me the same? Thank you !

Regards,

Kannan

Attachment: ExportDiagram_52cd9aa9.zip

[Aravind Ravi]

Hi Kannan, 

 

We can achieve the print/export feature from client side with the help of third party configuration. To export the HTML node, we want to use the ‘html-to-image’ third party control in the application . To install html-to-image npm packages in your application, please refer to the below link.  

  

Link: https://www.npmjs.com/package/html-to-image   

  

We have created a sample to export the HTML node using html-to-image packages. Please find the sample in below link  

  

Sample: Export-HTML-Node 

 

In case if you still wants in ASP.Net core means please informs us, we will ready to serve. 

 

Regards 

Aravind Ravi 

[Kannan T]

Hi Aravind,

First I tried in microsoft edge browser but getting the following error,

[object Error]: {description: "Object doesn't support property or method 'append'", message: "Object doesn't support property or method 'append'", ngDebugContext: Object, ngErrorLogger: function() { [native code] }, number: -2146827850...}

description: "Object doesn't support property or method 'append'"

message: "Object doesn't support property or method 'append'"

ngDebugContext: Object

ngErrorLogger: function() { [native code] }

number: -2146827850

stack: "TypeError: Object doesn't support property or method 'append' at FlowDiagramComponent.prototype.exportDiagramClick (http://localhost:4200/main.js:308:9) at Anonymous function (Function code:31:11) at handleEvent (http://localhost:4200/vendor.js:52109:9) at callWithDebugContext (http://localhost:4200/vendor.js:53203:9) at debugHandleEvent (http://localhost:4200/vendor.js:52906:5) at dispatchEvent (http://localhost:4200/vendor.js:49558:9) at Anonymous function (http://localhost:4200/vendor.js:50005:31) at Anonymous function (http://localhost:4200/vendor.js:55314:9) at ZoneDelegate.prototype.invokeTask (http://localhost:4200/polyfills.js:2780:13) at onInvokeTask (http://localhost:4200/vendor.js:46615:17)"

Then I tried in chrome but not exporting properly. ie the node image is not shown in the exported image file. Please check the attached exported image.

Regards,

Kannan

Attachment: Diagramhtml_(4)_87e434d1.zip

[Aravind Ravi]

Hi Kannan, 

 

In the sample the image source is used from domain so while exporting the image does not export property due to security purposes. So we refer the image from local folder and append the body in the document through append child method. Now the image exports properly. When using append child method in sample, the sample runs properly in the Edge browser without any issues and then image render properly. 

 

We have attached a sample for your reference. Please find the sample in below link 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-HTMLShapes35382562  

 

Regards 

Aravind Ravi 

 

 

[Kannan T]

Hi Ravi,

Export is happening. Thank you.

But, when export is processing, the image of the whole page is overlapped (since we have created one more div)

Also our product have more no of nodes (like 100), the export is taking long time, more than 5 mins. Any idea to fix this?

Regards,

Kannan

[Kannan T]

Hi Ravi,

Export is happening. Thank you.

But, when export is processing, the image of the whole page is overlapped (since we have created one more div)

Also our product have more no of nodes (like 100), the export is taking long time, more than 5 mins. Any idea to fix this?

Regards,

Kannan

Hi,

When I tried today (with more hard disk space), it is better but still taking more than 30 secs to export.

Regards,

Kannan

[Ramya Thirugnanam]

Hi Kannan, 

 

We have only prepared and send html content for generating the image. We have used third party (htmltoimage) tool for generating the image. So, we were unable to investigate on the performance problem with this. 

 

We can do image generation with web kit libraries and this can be achieved in server side. Could you please validate and confirm us whether this suggestion will help you to achieve your requirement? 

 

 

Regards,  

Ramya T 

[Kannan T]

Hi,

That also I've tried but because of dll issues I'm not able to export since we are using asp.net core. Could you please see my reply (and sample) on February 20, 2019 04:17 AM?

Regards,

Kannan

[Ramya Thirugnanam]

Hi Kannan,  

 

We have created a sample to convert html to pdf application in Asp.Net core web api. Please find the sample in below link. 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/7z/WebApplication3-2052438791  

 

With this sample, we can host the link and export the HTML node. In this sample, we have deleted the packages because file size is too large. You can manually installed the below list of packages using NuGet packages.  

 

Link:
packages
 

 

Regards, 

Ramya T