Incorrect colors for footer content template.

Philip Johns

Hi,

I'm having problems generating PDFs with regards to colours in the headers/footers changing using jsreport.net

I am instantiating the PDF generation using:


var report = await _jsReportMvcService.RenderAsync(new RenderRequest
{
    Template = new Template
    {
        Recipe = Recipe.ChromePdf,
        Engine = Engine.None,
        Content = content,

        Chrome = new Chrome
        {
            HeaderTemplate = header,
            FooterTemplate = footer,
            DisplayHeaderFooter = true,
            // Omitted other config options
        }
    }
});

And the HTML that has been inserted into footer is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
<div>
    <div style="background-color: purple;">
        <p style="color: #00FFFF">Testing 123</p>
    </div>
</div>
</body>
</html>

When comparing the generated PDF output the colours are different as you can see in this screen grab showing the generated PDF (left) and the same HTML as shown in a web browser (right).

Hello

The left image the text colour is #00ABAB where it should be #00FFFF as it is in the HTML. Additionally it fails to show the background colour of purple as set in the div. It's worth noting that HTML content included in the body (content) generates the colours correctly - it seems specifically the header/footer colours that are incorrect, which are a part of the Chrome element. Any ideas?

jan_blaha

Hi,

this is a chrome bug, we mention in the documentation
https://jsreport.net/learn/chrome-pdf#native-headers-and-footers

Please try to use the mentioned workaround and add -webkit-print-color-adjust: exact style.

Philip Johns

Perfect! Thanks so much for this. I do remember reading this a while back but couldn't remember where I saw it.