Incorrect colors for footer content template.

  • Hi,

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

    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" "">
    <html lang="en">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <div style="background-color: purple;">
            <p style="color: #00FFFF">Testing 123</p>

    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).


    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?

  • Hi,

    this is a chrome bug, we mention in the documentation

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

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

Log in to reply

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.