1

I have some html that I'm trying to turn into a pdf using puppeteer, and the html has some bits of it with a black background with white text on top. When I use puppeteer to convert it to a pdf, it renders black text on white perfectly, but the bits with white text on black change to white background with grey text.

Here's some example html:

<!DOCTYPE html>
<html>
<head>
</head>
<body style="font-family:Arial;">

<div style="display: flex; max-width: 100mm;">
    <div style="padding: 1em;">
        <h1>A</h1>
    </div>
    <div style="background:black;color:white;padding: 1em;">
        <h1>C</h1>
    </div>
</div>



</body>
</html>

When I try it in my own Chrome browser and press ctrl+p to print, it actually does the same thing - it renders white-on-black as grey-on-white.

What's going on here? How can I fix this?

TKoL
  • 13,158
  • 3
  • 39
  • 73
  • I tried following the advice [in this question](https://stackoverflow.com/questions/35630372/print-light-colored-text-as-dark-text-in-chrome) but it did not solve my issue, it continues to print the same way regardless of any `@media print` styles – TKoL Sep 06 '19 at 10:38
  • Do you need a programmed solution or do you just need a PDF? Chrome lets to save the whole webpage as a PDF based on your print styles. Then you can just print the PDF with no 3rd party libraries. – Royal Wares Sep 06 '19 at 10:54
  • Yes, that's what I'm already doing. I'm going into Chrome and printing as PDF, and it is not keeping my styles. It's doing this both on my Windows PC and in a Linux Server environment through puppeteer. – TKoL Sep 06 '19 at 11:41

1 Answers1

1

I found the answer after some messing around.

When printing to pdf, you can click 'more settings' and there's a setting called 'background graphics'. That shows my white-on-black sections correctly.

Furthermore, I'm using puppeteer from a php / Browsershot context. The Browsershot command to do 'background graphics' is the function $browsershot->showBackground()

TKoL
  • 13,158
  • 3
  • 39
  • 73
  • This works well when anyone wants to directly download a notebook from a browser. Better formatting and text. – darkexodus Oct 24 '21 at 17:12