puppeteer PDF ignores background-color

Question

I want to use the GEM dhalang inside RAILS to use the PDF feature from puppeteer.

I have a server side generated web side usind bootstrap and tables. Within the table I want to color the cells with

<td class="text-center" style="background-color: #ffdf7e"> 

But the background color is left out when I try to export as PDF.

I have already set the puppeteer option:

printBackground: true

But it does not fix this issue.

The issue has something to do wiht the bootstrap class 'table'.

When I replace this line :

<table class="table table-striped table-sm">

with this line :

  <table class="table-striped table-sm">

then the background colors will be display in the PDF !

But I want to keep the CSS formated table !

Any idea ?

Answer 1

I ran into this myself, and found that Bootstrap 4 has the following styles towards the end of the dist css:

  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }

For some reason, Puppeteer (or potentially Chromium?) is giving the .table td rule in Bootstrap CSS a higher priority than the inline style. A simple fix was to throw a !important on the inline style. You could also use a custom class for the td , but you'll still need to throw a !important on the rule to override the Bootstrap style.

I suppose another option might be (if you're using a locally loaded Bootstrap style, and not their CDN) is to just remove that line from Bootstrap's source.