Borders don't Print in Chrome PDF Viewer

0
votes

I'm using wkhtmltopdf to convert a HTML page to a PDF file. The client then downloads the PDF and prints it.

This works great if you use something like Adobe Reader to open the PDF files, but if you use Chrome's built-in PDF viewer this will not work.

The PDF will be shown (almost) correctly like this in the Chrome PDF Viewer. (all the borders are actually the same thickness, i don't know why it shows the middle borders thicker): enter image description here

But if you print the PDF from the Chrome PDF Viewer, some borders will just dissapear: enter image description here

I have already tried making the border thicker than 1px, and i tried pt instead of px.

1
htmlcssgoogle-chromepdfwkhtmltopdf
Can you post the HTML/CSS of the page you're converting to a PDF? – Steyn

1 Answers

4
votes

How thick are you setting the borders? Download the PDF, open it in chrome, and then zoom in to around 400%. Do the borders show back up? If so, then your issue is with how Chrome PDF viewer handles fine line rendering. This has been an issue for several years, which is compounded by the fact that Chrome PDF Viewer has had issues rendering table borders since at least 2011.

Most sources say to disable Chrome PDF Viewer so that it can fall back to Adobe Reader. This works, but this was an unusable option for me since our server was processing PDFs via PhantomJS and modification to how Chrome operated within it would have unknown effects on other custom PDF solutions we were offering. This article was the one that pointed me to the possibility that it was the fine-line renderer. It seems that there is a threshold thickness of 2px where Chrome PDF Viewer starts giving inconsistent results on table borders. You can demonstrate this with the following snippits:

table, th, td {
    /* 1.965354px, this does not work */
    border: 0.52mm solid #ddd;
}

table, th, td {
    /* 2.00315px, this does work */
    border: 0.53mm solid #ddd;
}

Setting the thickness to 2px should solve your issue. It is not a true solution (my gut is telling me the root may be with how Chrome PDF Preview handles border-collapse), but for now this will hopefully help you.