We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Adding html elements to diagram control

Thread ID:

Created:

Updated:

Platform:

Replies:

140825 Nov 8,2018 02:10 PM UTC Mar 4,2019 08:52 AM UTC Angular - EJ 2 42
loading
Tags: Diagram
john taylor
Asked On November 8, 2018 02:10 PM UTC

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 [Syncfusion]
Replied On November 13, 2018 05:46 AM UTC

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. 
 

  
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. 
 
 
 
 
Regards, 
Ramya T 


Kannan T
Replied On November 17, 2018 07:05 AM UTC

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 [Syncfusion]
Replied On November 19, 2018 10:27 AM UTC

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

  
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
Replied On November 21, 2018 08:32 AM UTC

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 [Syncfusion]
Replied On November 21, 2018 11:52 AM UTC

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.   
  
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
Replied On November 23, 2018 10:04 AM UTC

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
Replied On November 23, 2018 01:32 PM UTC

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 [Syncfusion]
Replied On November 26, 2018 06:33 AM UTC

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. 
 
 
However, we have workaround to export the html/native nodes in diagram. Please find the kb document as below. 
 
 
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
Replied On November 28, 2018 06:02 AM UTC

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 [Syncfusion]
Replied On November 28, 2018 10:49 AM UTC

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
Replied On November 28, 2018 11:34 AM UTC

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 [Syncfusion]
Replied On November 29, 2018 07:08 AM UTC

Hi Kannan, 
 
The Show or hide image functionality is working fine (2nd 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
Replied On January 4, 2019 01:26 PM UTC

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 [Syncfusion]
Replied On January 7, 2019 09:51 AM UTC

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: 
 
 
 
 
Regards, 
Ramya T 


Kannan T
Replied On January 9, 2019 04:58 AM UTC

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 [Syncfusion]
Replied On January 9, 2019 10:25 AM UTC

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  
  
  
·        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",  
          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" });  
      },  
   });   
  
  
  
  
   
Regards,  
Ramya T  


Kannan T
Replied On January 11, 2019 07:01 AM UTC

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 [Syncfusion]
Replied On January 11, 2019 08:40 AM UTC

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
Replied On January 11, 2019 11:12 AM UTC

Hi Ramya,

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

Regards,
Kannan

Ramya Thirugnanam [Syncfusion]
Replied On January 14, 2019 05:37 AM UTC

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
Replied On February 8, 2019 07:20 AM UTC

Hi Ramya,

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

Regards,
Kannan

Shyam G [Syncfusion]
Replied On February 8, 2019 12:29 PM UTC

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
Replied On February 8, 2019 12:49 PM UTC

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 [Syncfusion]
Replied On February 11, 2019 06:44 AM UTC

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 13th 2019. We have provided drafted version of document to print and export the html node.  please refer to the document as below. 
 
 
Regards, 
Ramya T 


Kannan T
Replied On February 12, 2019 08:12 AM UTC

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 [Syncfusion]
Replied On February 13, 2019 06:26 AM UTC

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 
 
 
Regards 
Ramya T 


Kannan T
Replied On February 13, 2019 08:40 AM UTC

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 [Syncfusion]
Replied On February 13, 2019 10:17 AM UTC

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 20th  2019. So, please set diagram width and height in pixel. 
 
Regards 
Ramya T 


Kannan T
Replied On February 13, 2019 10:54 AM UTC

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 [Syncfusion]
Replied On February 13, 2019 11:23 AM UTC

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. 
 
 
Regards, 
Ramya T 


Kannan T
Replied On February 14, 2019 07:48 AM UTC

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
Replied On February 14, 2019 10:34 AM UTC

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 [Syncfusion]
Replied On February 15, 2019 11:16 AM UTC

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. 
 
 
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
Replied On February 20, 2019 04:17 AM UTC

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 [Syncfusion]
Replied On February 20, 2019 11:36 AM UTC

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.  
  
  
We have created a sample to export the HTML node using html-to-image packages. Please find the sample in below link  
  
 
In case if you still wants in ASP.Net core means please informs us, we will ready to serve. 
 
Regards 
Aravind Ravi 


Kannan T
Replied On February 21, 2019 01:31 PM UTC

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 [Syncfusion]
Replied On February 21, 2019 03:53 PM UTC

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 
 
 
Regards 
Aravind Ravi 
 
 


Kannan T
Replied On February 22, 2019 02:54 PM UTC

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
Replied On February 25, 2019 06:08 AM UTC

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 [Syncfusion]
Replied On February 25, 2019 11:28 AM UTC

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
Replied On February 25, 2019 11:45 AM UTC

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 [Syncfusion]
Replied On March 4, 2019 08:52 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon