Chrome pdf border thickness
-
I'm trying to migrate a report to JSReport. I'm using handlebars html the chrome-pdf engine.
The problem is that with chrome-pdf the border lines of the tables with 1px thickness are noticably thicker than on my original report. Here are two screenshots (Zoomed in to show the problem) that show the difference in thickness:
Original border:
Chrome-pdf border:
I noticed that chrome-pdf adds rectangles with height/width of 0.3cm instead of lines in the pdf for the borders.
Is there any way to reduce the thickness of those lines in chrome-pdf or force it to add lines instead of rectangles?
-
can you specify from which implementation are you migrating away? i mean, what were you using to create your original report? just raw nodejs + puppeteer/chrome code?
can you share the template on the playground? it is important to see the full code to understand what can be happening, and if it is normal behaviour or not
-
Hi @bjrmatos,
I'm trying to migrate from the .Net iText Library.
I've uploaded an simple html example here: https://playground.jsreport.net/w/david.masshardt/oIX7iUvs
The easiest way to see the difference in border thickness is to create a docx template with a simple table with minimum border width and convert it using unoconv to a pdf. (Sadly I was not able to upload a docx asset to the playground)
To compare the pdf's I'm using LibreOffice. Just open the two pdf's generated from chrome-pdf and docx in LibreOffice and select one of the borders. In the docx the borders are rendered as lines and in chrome-pdf they are rendered as filled rectangles and are a bit thicker. Also the recangles are created separatly for every cell in the table. (So 4 recangles arround every cell) In the docx to pdf report the lines are continuous over multiple cells.
I found out that when I render the pdf with a 0.8 scale the line width would be exactly the same as in my iText report. But of course this scales down the whole report and I didn't find a way to just scale down the border lines.
I've also tested this with wkhtmltopdf and electon-pdf, but the borders are exacly the same.
Is there any way to scale down only the borders in an html report?
-
@TheNetStriker i understand better what you mean originally, thanks for the details.
unfortunately, it seems any browser-based pdf rendering (like chrome, electron, wkhtmltopdf) will produce this border thickness as the minimum, browsers have a minimum of pixels and always round to that minimum, which translates to the border thickness you see and get.
there is no way to reduce such thickness, the only workaround i know is the same one you found, which involves to use zoom or transform: scale(...) to make the content more thin, however as you mentioned it makes other different content also smaller, which sometimes can be fixed by re-calculating width or font-sizes, etc
-
@bjrmatos Ok thanks for the info.
Is there also no way to post process the pdf to adjust the borders? I looked for a nodejs library where I could loop through all the rectangles in the pdf and adjust the size, but I only found libraries where I could add new elements to an existing pdf.
-
You can do basically what you want using scripts extension which hooks your code for postprocessing
https://jsreport.net/learn/scripts
