Unable to export diagram to SVG images using HTMLtoPdfConverter's ConvertPartialHtmlToSvg() method

[Mithun]

Hello Syncfusion team,

My angular app uses Syncfusion's EJ2 diagram control. Since the diagram contains native nodes and custom image nodes, I'm forced to use HTMLtoPDFConvert's Webkit rendering (hosted in an asp.net web API) to print/export the diagram.

I extract the diagram's HTML as a string (using the diagram's GetDiagramContent() method), which I then pass on to my back-end asp.net core webAPI.

However, I'm unable to figure out how to call HTMLtoPdfConverter's ConvertPartialHtmltoSvg() methods, in order to create an SVG image.

What should be the value of the 'htmlElementID' parameter?

[Gowthamraj Kumar]

Hi Mithun, 

 

Thank you for contacting Syncfusion support.  

 

We can convert complete HTML file/URL to SVG using following code snippet, 

//Initialize HTML to PDF converter  

HtmlToPdfConverter htmlConverter = new HtmlToPdfConverter(); 

 

WebKitConverterSettings settings = new WebKitConverterSettings(); 

 

settings.WebKitViewPort = new Syncfusion.Drawing.Size(1280,0); 

 

//Set WebKit path 

settings.WebKitPath = @"C:\Users\xxxxx\.nuget\packages\syncfusion.htmltopdfconverter.qtwebkit.net.core\19.2.0.44\lib\QtBinariesWindows"; 

 

//Assign WebKit settings to HTML converter 

htmlConverter.ConverterSettings = settings; 

 

if (File.Exists("Sample.svg")) 

{ 

    File.Delete("Sample.svg"); 

} 

 

MemoryStream stream = new MemoryStream(); 

 

htmlConverter.ConvertToSvg("chart.html", stream); 

 

File.WriteAllBytes("Sample.svg", stream.ToArray()); 

 

 

We can convert partial HTML to SVG using HTML element ID, please refer below code snippet and HTML file for more information. But we are facing issue while converting partial HTML to SVG conversion, currently we are analysing on this and we will update further details by July 21, 2021.  

 

MemoryStream stream = new MemoryStream(); 

 

htmlConverter.ConvertPartialHtmlToSvg(“chart.html”, "piechart", stream); 

 

File.WriteAllBytes("Sample.svg", stream.ToArray()); 

 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Gowthamraj K 

[Mithun]

Hi Gowthamraj,

I'm still a bit confused about the exact process for generating the SVG. Here is what I'm trying to do.

• I have a diagram that looks like this:

 

• Using the diagram component's getDiagramContent() method, I get the diagram's HTML in string format. This is what it looks like: LINK
• I pass this HTML string to my back-end (asp.net core webAPI).
  
• Here I'm attempting to call either ConvertToSvg() or ConvertPartialHTMLtoSvg() methods (so that I can convert the HTML string to SVG).
  
• However, neither of these methods take HTML string as a parameter. They only take a url as a parameter. As a result, I'm unable to figure out how to supply the HTML string to these methods (in order to generate the SVG file).
  

Thanks,

-Mithun

[Gowthamraj Kumar]

Hi Mithun, 

 

Thank you for the update.  

 

We can convert partial HTML to SVG using HTML element ID, please refer below code snippet and HTML file for more information. But we are facing issue while converting partial HTML to SVG conversion, currently we are analysing on this and we will update further details by July 21, 2021.       MemoryStream stream = new MemoryStream();      htmlConverter.ConvertPartialHtmlToSvg(“chart.html”, "piechart", stream);      File.WriteAllBytes("Sample.svg", stream.ToArray());

As we said earlier, currently we are analysing on this and we will update further details by July 22, 2021.

I'm still a bit confused about the exact process for generating the SVG. Here is what I'm trying to do.    I have a diagram that looks like this:      Using the diagram component's getDiagramContent() method, I get the diagram's HTML in string format. This is what it looks like: LINK I pass this HTML string to my back-end (asp.net core webAPI). Here I'm attempting to call either ConvertToSvg() or ConvertPartialHTMLtoSvg() methods (so that I can convert the HTML string to SVG). However, neither of these methods take HTML string as a parameter. They only take a url as a parameter. As a result, I'm unable to figure out how to supply the HTML string to these methods (in order to generate the SVG file).

We do not have support for converting HTML string to SVG with HTML to PDF converter. As a workaround you can write the HTML string to file in sample level and then you can convert the HTML file to SVG using ConvertToSvg method.

 

 

 

Regards, 

Gowthamraj K 

[Sivaram Gunabalan]

Hi Mithun, 

 

Thank you for your patience. 

 

We do not have support for converting HTML string to SVG with HTML to PDF converter. As a workaround we are save the HTML string into file in sample level and then converted the HTML file to SVG using ConvertToSvg method. The converted SVG file preserves the diagram same like a web browser output of the saved HTML file. We attached the sample,input and output document below for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SVG_Sample203554865 

Input Document: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Svg553121095 

Output Document: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample2074985566 

 

Note: Above sample does not have QtBinariesWindows folder. You can use already existing QtBinariesWindows folder. 

 

Kindly try the above sample in your end and let us know the result. 

 

Regards, 

Sivaram G 

[Mithun]

Thanks Sivaram, that worked! I'm now able to export my diagrams to SVG format.

[Prakash Viswanathan]

Hi Mithun, 

  

Thank you for the update. Please let us know if you need any further assistance on this.  

  

Regards, 

Prakash V