JavaScript print() not rendering element style

Question

I am trying to print some page content using JavaScript. I have a component that has styling applied via the HTML style attribute, like so:

style="color: rgb(55, 61, 63); font-size: 12px; font-weight: 400; font-family: -apple-system, 
BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", 
"Segoe UI Emoji", "Segoe UI Symbol";"

When I open a new window to print content from, the content is rendered correctly:

However, when Window.print() is called to print the content, the legend colours for the chart (which use the style above) are not rendered:

Does anyone know how to solve this? Print is called directly on the same window as the first image

The print dialog in browsers usually offers a [checkbox that says “Print backgrounds”](//i.stack.imgur.com/oj0qc.png). Have you checked that? — Sebastian Simon, Nov 21 '22 at 15:01
I hadn't checked it, it works now thanks! Do you know of a way to avoid having to do this? e.g. a wrapping div on the content or something like that — user14131782, Nov 21 '22 at 15:05

score 0 · Answer 1 · answered Nov 22 '22 at 15:14

The solution to this issue was as detailed in this answer

I added the following internal stylesheet to my print content:

<!DOCTYPE html>
<html>
  <head>
    ...styles
    <style>
      .print-background-content {
        -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 - 15.3, Edge */
        color-adjust: exact !important;                 /* Firefox 48 - 96 */
        print-color-adjust: exact !important;           /* Firefox 97+, Safari 15.4+ */
      }
    </style>
  </head>
  <body>
    <div class="print-background-content">
      ...content
    </div>
  </body>
</html>

Note: enabling the 'background graphics' option in the print preview dialog also worked, but this solution removes the need to enable it

JavaScript print() not rendering element style

1 Answers1