1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Unable to export diagram to SVG images using HTMLtoPdfConverter's ConvertPartialHtmlToSvg() method

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

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?




6 Replies 1 reply marked as answer
GK Gowthamraj Kumar Syncfusion Team July 19, 2021 12:15 PM UTC

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 


MI Mithun July 19, 2021 02:23 PM UTC

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





GK Gowthamraj Kumar Syncfusion Team July 20, 2021 11:31 AM UTC

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 


SG Sivaram Gunabalan Syncfusion Team July 22, 2021 04:52 PM UTC

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


Marked as answer
MI Mithun July 26, 2021 03:29 PM UTC

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


PV Prakash Viswanathan Syncfusion Team July 27, 2021 07:24 AM UTC

Hi Mithun, 
  
Thank you for the update. Please let us know if you need any further assistance on this.  
  
Regards, 
Prakash V 


Loader.
Up arrow icon