Phantomjs: Background Color for Header / Footer

Created on 27 Jan 2014 · 12Comments · Source: ariya/phantomjs

How can I define / override the white background color for header and footer?

stale

Source

19Gerhard85

👍5

Most helpful comment

Also annoying for me as I try to add a background to the whole PDF document. Header and Footer always get a white background.

Has anyone found a fix for this ?

abdelilah on 11 Nov 2016

👍2

All 12 comments

Custom header and footer is very tricky, the only way I found to do it is to put the style in the inline way.

http://stackoverflow.com/questions/17502677/phantomjs-dosent-render-footers-with-a-custom-styles
and
http://stackoverflow.com/questions/18706243/getcomputedstyle-of-a-clone-element-which-is-not-in-the-dom

the second link is best method I found to convert the css to inline style

crashbtz on 27 Jan 2014

Thank you for your answer.

Seems like the H1 is embedded into another tag which has the annoying white background.

            ...
            header: {
                height: 100,
                contents: phantom.callback(function(pageNum, numPages) {
                    options['header-html'] = '<h1 style="background-color: lightgrey;">TEST</h1>';
                    return options['header-html'].replace('%pageNum%', pageNum).replace('%numPages%', numPages);
                })
            },
            ...

pdf-header

Even when I set

<html><head></head><body style="background-color:transparent;"><h1>TEST</h1></body></html> the small white gap is present.

Greets

19Gerhard85 on 28 Jan 2014

Thats weird, I don't have that. Where the purple border comes from?
I have an error with the "options['header-html'] but when I write something like that:

...
header: {
        height: 100,
        contents: phantom.callback(function(pageNum, numPages) {
                var header = '<h1 style="background-color: lightgrey;">TEST</h1>';
                return header.replace('%pageNum%', pageNum).replace('%numPages%', numPages);
         })
}
...

Everything seems alright, maybe that's stupid but does that change anything if you precise width:100%?

crashbtz on 28 Jan 2014

The purple border is my background image to check if all page margins calculated correctly.

I've added width:100% to the H1 of the header but nothing changed.

...
header: {
    height: 100,
    contents: phantom.callback(function(pageNum, numPages) {
        options['header-html'] = '<h1 style="background-color: lightgrey; border: none; padding: 0; width: 50%;">TEST</h1>';
        return options['header-html'].replace('%pageNum%', pageNum).replace('%numPages%', numPages);
    })
},
...

Sadly, the gap remains.

pdf-header

19Gerhard85 on 28 Jan 2014

This issue is also causing issues if you watermark PDF's using PDFTK, you end up with a white box with the header/footer in it. Its causing major headaches here trying to fit a standard page look and feel across multiple reports.

ianewby on 19 May 2014

The white box of header and footer is the real problem. It's not possible to make the header and footer transparent. Which is important for post processing (e.g. add a watermark / letter head with another pdf file).

andrebaresel on 15 Jul 2016

Also a problem for us, where on the front page we don't want a header, but even if we make the header empty, it will still show as a white box that overwrites whatever that is already on the page.

willemmulder on 22 Aug 2016

👍2

Also annoying for me as I try to add a background to the whole PDF document. Header and Footer always get a white background.

Has anyone found a fix for this ?

abdelilah on 11 Nov 2016

👍2

Due to our very limited maintenance capacity, we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed (see #15395 for more details). In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!