1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Can't dowload Line Chart and Circular Gauge chart as pdf and png properly

Can't dowload Line Chart and Circular Gauge chart as pdf and png properly

I am trying to convert Line Chart and Circular Gauge chart html as PDF and PNG using HtmlToPdfConverter. But I am facing following issue.

Line Chart: ​

  1. Converter only converts the circle from html to pdf. But I need to convert the whole html (Including line between circle) to pdf. (Please see the html output from append link)
  2. When I convert the pdf into image(PNG) it added a black background to the image.

 Circular Gauge Chart: ​

  1. Converter is going to freeze/block when trying to convert html to pdf. One more thing, it can convert some circular gauge html to pdf. I have added two html string for your convenient.

Line Chart Html: ​https://jsbin.com/bejoyawazi/edit?html,output

Circular Gauge Html 1 (Not Working): https://jsbin.com/yejozebara/edit?html,output
Circular Gauge Html 2 (Working): ​https://jsbin.com/vejizenoco/edit?html,output

Code:

// Please Add the html string from previous section.

//string htmlString = "";


var htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.WebKit);


var webKitSettings = new WebKitConverterSettings


{


AspectRatio = AspectRatio.FitPageSize,


PdfPageSize = PdfPageSize.A4,

WebKitViewPort = new Size(100, 0),


Orientation = PdfPageOrientation.Landscape,


SinglePageLayout = SinglePageLayout.FitWidth


};


htmlConverter.ConverterSettings = webKitSettings;


var stream = new MemoryStream();


using (var doc = new PdfDocument())


{


PdfPage page = doc.Pages.Add();


PdfPage currentPage = doc.Pages[0];

SizeF clientSize = currentPage.GetClientSize();


PdfDocument document = htmlConverter.Convert(htmlString, string.Empty, clientSize.Width, clientSize.Height, AspectRatio.FitPageSize);


PdfPage pdfPage = document.Pages[0];


PdfTemplate template = pdfPage.CreateTemplate();


currentPage.Graphics.DrawPdfTemplate(template, new PointF(50, 50));


// Save the document to stream


doc.Save(stream);


// Save the stream as pdf


FileStream pdfFileStream = File.OpenWrite("TestReport.pdf");


stream.WriteTo(pdfFileStream);


// Save the stream as image (png)


using (var loadedDoc = new PdfLoadedDocument(stream))


{


using (var imageStream = new MemoryStream())


{


Image image = loadedDoc.ExportAsImage(0);


image.Save(imageStream, ImageFormat.Png);


imageStream.Position = 0;


FileStream outStream = File.OpenWrite("TestReport.png");


imageStream.WriteTo(outStream);


outStream.Flush();


imageStream.Dispose();


}


}


}



5 Replies 1 reply marked as answer
GK Gowthamraj Kumar Syncfusion Team February 10, 2022 02:36 PM UTC

Hi Nurul, 
 
Currently, we are trying to reproduce the reported issue with provided details on our end. We will update the further details on February 11th 2022.

Regards, 
Gowthamraj K 


GK Gowthamraj Kumar Syncfusion Team February 11, 2022 03:09 PM UTC

Hi Nurul,  
 
We have checked the reported issues with WebKit HTML to PDF converter. Our HTML converter internally make use of Qt WebKit rendering engine for converting HTML to PDF. WebKit rendering engine preserves the output PDF document like how the input HTML file/URL is displayed on the WebKit based web browsers. The reported styles rendering issue are occurs in WebKit rendering engine itself. The same behaviour as replicates in our converter. So we could not proceed further with WebKit rendering engine. 
   
However, the provided HTML file is converted properly in our Blink rendering engine. Blink converter internally make use of chromium executable in headless mode for converting HTML to PDF. It will preserve the output document, like how the input HTML file is rendered on chrome browser. This is latest rendering engine and it supports the latest bootstrap styles and advanced features. Can you please try our latest Blink rendering engine and let us know if it is suites your requirement. The Blink rendering engine has the features sets which are available in the WebKit rendering engine. Please refer below links for more information about Blink,   
 
Note: In our Html to PDF converter itself, we have support for converting HTML to image in WebKit/Blink rendering engine.  Please refer the below links,
HTML to PDF: https://help.syncfusion.com/file-formats/pdf/convert-html-to-pdf/blink#html-string-to-image

 
We have attached the sample and output document (Blink) for your reference, please try the sample in your end and let me know the result.  
 
Please try the above suggestions in your end and let us know if you need any further assistance with this.    

Regards, 
Gowthamraj K 


Marked as answer
NH Nurul Hasan replied to Gowthamraj Kumar February 15, 2022 07:53 PM UTC

Hi Gowthamraj Kumar,


Thank you so much for your valuable response. The solution is working fine. But I am facing some new issues due to change the engine.

I need to convert the html to pdf in several configuration which are Actual Size, Fit Page, two chart in a page, four chart in a page. To support these types of requirement I had set the WebKitViewPort size to 900 (for Actual) and 100 (for other 3 options) and calculate the size and location of each chart dynamically before DrawPdfTemplate. These solution was working almost fine in WebKit engine. But it's broken now for Blink Engine. You may assume I am passing array of charts/html to the back-end and convert the html to pdf using a loop with the configuration.


So how do we fix this in blink engine? I have tried by changing the ViewEngine size. But I didn't get the expected output.


Details Explanation:

I have observed that the default size of a pdf page is (w=802,h=515) without the margin and header footer.

So if we have 4 charts (Most of the cases all charts are SVG) in an array and pass a configuration (You can add the previous charts in an array with duplicate value). We need to do the following things depending on the configuration.


  1. Configuration Value Actual size: ​We need to convert the html into pdf with the same size. Also if the html height width is grater than pdf size then we need to scale down to fit the image to pdf page. There are 4 pdf page generated for this.
  2. Configuration Value Fit Page: ​Convert the html to pdf with fit page no matter what is the size of html is. There are 4 pdf page generated for this.
  3. Configuration Value Two Per Page: ​Convert the html/charts into two per page. That means each chart will take 802/2 width and 515/2 height. There are 2 pdf page generated for this.
  4. Configuration Value Four Per Page: Convert the html/charts into four per page. That means each chart will take 802/4 width and 515/4 height. There are 1 pdf page generated for this.

Basically we need to find a way to convert the chart into pdf with a specific height and width no matter what is html height width. If we find that way, we can easily draw the charts into pdf page by passing the location property. Do you have any idea how we do this? It would be a great help for me.


You can find the difference here: https://drive.google.com/drive/folders/1NUeHL2lWn6WTqSZPQC62bksPPQtm1_JM?usp=sharing

Regards,

Hasan


GK Gowthamraj Kumar Syncfusion Team February 16, 2022 01:15 PM UTC

Hi Nurul, 
 
Currently, we are trying to reproduce the issue with provided details on our end and we will update the further details on February 17th 2022. 
 
Regards, 
Gowthamraj K 


GK Gowthamraj Kumar Syncfusion Team February 17, 2022 02:34 PM UTC

Hi Nurul,

 
The content size in the PDF document may differs based on the viewport size. By default, WebKit/Blink rendering engine internally using System viewport size for converting HTML to PDF.  WebKit/Blink converter internally make use of QtWebKit/chromium executable in headless mode for converting HTML to PDF. It has different rendering approaches for each engine. The system viewport size may differs in system to system. So, you may get different results in different environment. If we explicitly set the viewport size, the content will be scaled/rendered in the PDF document based on the viewport size specified in converter settings. So you can adjust the content size for blink rendering engine to resolve the issue.  By default in .NET core, the viewport size is 1024 for HTML conversion.  
 
 
Regards, 
Gowthamraj K 


Loader.
Up arrow icon