Html to pdf pixel conversion

[Unknown]

Hello dear Syncfusion team,

We are currently struggling to get the correct settings to display our page template as A4 pdf.

Following case: Our customers can create a template for a A4 formatted e.g. invoice - there they can drag and drop elements where ever they want. Our template editor has a size of 1050x1484, which is the default A4 (595x842) multiplied with ~1,76.

Now we want to convert our html template to a pdf, but our html elements do not seem to be on the correct position and i cannot tell why. It seems like our 1x1pixel matrix does not fit to the pdf "pixel" matrix.

E.g.

Users can also define a margin. When i set Margin.Left in the BlinkConverterSettings to 66,4 px it looks like this:

BlinkConverterSettings settings = new BlinkConverterSettings();
settings.Margin.Left = 66,4;

The black text is coming from our html. The grey one is from a background image - so this is independent of the pdf margin and always on the same position as an indicator.

To give my suggestion a proof i decided to rewrite the code a bit, I set margin left of the blinkConverterSettings to 0, and added a margin-left to my html element. So it has margin-left:66,4px. As we see in the following picture, it is not aligned to the grey text. So having 66,4 px margin.left in the blinksettings is not the same like having a margin of 66,4 in my html.

And this is the part where i need your help:

How can i ensure that my pixel value of the html is the same like in the pdf? We tried out different ViewPortSizes (BlinkConverterSettings.ViewPortSize) and different PdfPageSize. We got the best result, when the PdfPageSize was default (PdfPageSize.A4) and the ViewPortSize was the same (595,842). But it does not feel like the correct approach. We are saving the freedrag elements of our editor with xy-coordinates, but they don't have the correct position on the pdf.

Any ideas what we do wrong? How do we actually bring our 1050x1484 html page perfectly fitting to a a4 pdf?

In addition: We are working in Blazor displaying the pdf with the Pdf viewer.

Best Regards,

Patrick

[Unknown]

I just created a basic example project. You can just run it and the document-html-ordered.html will get rendered to the document-html-ordered.pdf.

Attachment: Archive_793c7c68.zip

[Santhiya Narayanan]

We could not achieve your requirement directly because it will take full page size during the conversion.As a workaround,We can achieve your requirement by setting Top and Bottom margin on our blink Converter settings.We have attached the sample for your reference.Please try the sample on your end and let us know the result whether it is satisfies your requirement or not.

sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/HTMLToPDFNET6.01750926480

Output: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Output-1106295992

If you want to add additional template for header and footer, please refer the below KB link for more details

https://www.syncfusion.com/kb/13684/how-to-add-pdf-header-and-footer-while-converting-html-to-pdf-document

[Unknown]

Hey, thanks for the quick respose, but i guess you missunderstood my query (:

The footer text was just an indicator, this is a background image. I wanted to align the content (the text above - "Lorem ipsum" in comic sans) to the footer text. My images show, that margin the is different when I set the pdf margin.left in the BlinkConverterSettings to 66.4px (my first image) than when I set the wrapping element of my "Lorem ipsum" text to a style="margin-left:66.4px" (second image) in HTML.

I wanted to know how i can ensure, that the pixel "scale" is the same. I know that the viewport can be a factor of that, but i don't know how to adjust this.

Hope this clarifies my query a little bit better

[Santhiya Narayanan]

We were able to reproduce the reported issue with the provided details on our end. Currently, we are validating this, and we will update further details shortly.

[Sivaram Gunabalan]

The reported issues still need a lot more in-depth research; thus we are looking into them. On February 3^rd, 2023, further information will be updated.

[Sivaram Gunabalan]

On our further analysis, We have process the provided input value as a point value in our Blink Converter settings margin size. In provided HTML file you set the pixel values to the margin left. So we need to set the converted pixel values similar to the point values which is used in converter settings. 88.5px is the converted value of 66.4pt value. We have tried the conversion with 88.5px as the margin-left value and the scale value
as 1.0f to avoid extra space. Kindly set the margin-left: 88.5px in the input HTML and set the settings. Scale = 1.0f in converter settings and try the conversion. We have attached the generated output document for your reference,

Output: https://www.syncfusion.com/downloads/support/directtrac/general/pd/HTML-TO-PDF-750738454

Kindly try the provided solution on your end and let us know the result.