All geek questions in one place

PDF display errors using wkhtmltopdf / tables / acrobat-reader

I generated a PDF file using wkhtmltopdf from an html page. The html page uses tables with 1 pixel border. If I open the PDF using Acrobat or Foxit, they randomly skip drawing vertical borders, but they appear if I zoom in. So I guess this is some kind of rounding error because the lines are too thin?

If I print a PDF, it looks good.

And I just realized this would happen if I set the background color.

How can i fix this?

Here is an example PDF . The border separating the characters "a" and "b" disappears depending on the scaling factor. I generated this file as follows:

echo " <html><body> <span style="border: 1px solid black; background-color:red;">a</span> <span style="background-color:red">b</span> </body></html>" | wkhtmltopdf.exe - test.pdf
+4
source share
3 answers

Your line is not missing; it is too small to display on the screen.

This is because PDF files are displayed according to their page size, and not depending on how large the functions on the page are. Everything on the page is scaled up or down to fit into the PDF page, and therefore your line decreases and thus disappears: 1/3 = 0.333 = no line.

To fix this, you have the following options:

  • Reduce the page size by wkhtml2pdf using: --page-size A4
  • Reduce the width and height of the page using: --page-width 9in --page-height 6in
  • Make your line thicker.

Option 3 is probably preferable in this case. This is not a very elegant solution, but you do not have many opportunities for the game. If you write PDF at a low level, then everything can be done, but since you use wkhtml2pdf, you are limited in what it allows you to install.

+6
source

I had a similar problem with table borders. It helped me to use pt instead of px in my css.

See W3C :

But in general, you would use a different set of units for display on the screen than for printing on paper.

+4
source

I suppose you want a thin line, otherwise you would not set the width to 1px.

The key to having thin line borders displayed in PDF files made with wkhtmltopdf is to use the SVG background, for example:

 .hairline-border { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><rect x='0' y='0' width='100%' height='100%' stroke='black' fill='white' stroke-opacity='1' /></svg>"); }

For the hair separator (think <hr> ), I use:

 .hairline { height: 0.5mm; width: 100%; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0mm' y1='0mm' x2='300mm' y2='0mm' style='stroke:black; stroke-width:0.25mm;' /></svg>"); }

and I use them like this:

 <div class="hairline-border"></div>

And it displays correctly in Firefox and Safari / Chrome, and wkhtmltopdf at least keeps the line width as it is. There was some discussion that the base64 SVG conversion guarantees greater compatibility with IE. Honestly, I didn't care if IE would be happy or not, but see Inline SVG in CSS if you need to.

+1
source

Source: https://habr.com/ru/post/1383638/

More articles:


All Articles