CODEWITHSUNDEEP
cssheaderpdf-generationfooterphantomjs
Erik
Erik

Reputation: 14750

Phantomjs doesn't render footers with a custom styles

I have the following example:

var page = require('webpage').create(),
    system = require('system');

if (system.args.length < 3) {
    console.log('Usage: printheaderfooter.js URL filename');
    phantom.exit(1);
} else {
    var address = system.args[1];
    var output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };
    page.paperSize = {
        format: 'A4',
        margin: "1cm"
        footer: {
            height: "1cm",
            contents: phantom.callback(function(pageNum, numPages) {
                if (pageNum == numPages) {
                    return "";
                }
                return "<h1 class='footer_style'>Footer" + pageNum + " / " + numPages + "</h1>";
            })
        }
    };
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {                
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

In the example above I use footer_style class that look likes in my css file the following:

.footer_style {
  text-align:right;
}

But unfortunately that dosen't works. I'm trying to create pdf file such as follows:

./phantomjs rasterize.js index.html test.pdf

Upvotes: 9

Views: 7012

Answers (3)

Daan Broekhof
Daan Broekhof

Reputation: 549

I have an update to mak's excellent answer for PhantomJS 1.9.7.

This version fixes:

  • Circumvent bug which 'blank's the parent document (PhantomJS 1.9.7)
  • Style mixups when styles are nested (do depth-first traversal instead)
  • Also works when tags do not have classes
/**
 * Place HTML in the parent document, convert CSS styles to fixed computed style declarations, and return HTML.
 * (required for headers/footers, which exist outside of the HTML document, and have trouble getting styling otherwise)
 */
function replaceCssWithComputedStyle(html) {
  return page.evaluate(function(html) {
    var host = document.createElement('div');
    host.setAttribute('style', 'display:none;'); // Silly hack, or PhantomJS will 'blank' the main document for some reason
    host.innerHTML = html;

    // Append to get styling of parent page
    document.body.appendChild(host);

    var elements = host.getElementsByTagName('*');
    // Iterate in reverse order (depth first) so that styles do not impact eachother
    for (var i = elements.length - 1; i >= 0; i--) {
      elements[i].setAttribute('style', window.getComputedStyle(elements[i], null).cssText);
    }

    // Remove from parent page again, so we're clean
    document.body.removeChild(host);
    return host.innerHTML;
  }, html);
}

Upvotes: 5

mak
mak

Reputation: 13405

We know that classes do not work but inline styles do. What we can do is replace the class with the computed style.

Here is a function that will take a piece of html, create a temporary element in the body with the html, compute the style for each element with a class, add the computed style inline and return the new html.

function replaceClassWithStyle(html) {
    return page.evaluate(function(html) {
        var host = document.createElement('div');
        host.innerHTML = html;
        document.body.appendChild(host); // if not appended, values will be blank
        var elements = host.getElementsByTagName('*');
        for (var i in elements) {
            if (elements[i].className) {
                elements[i].setAttribute('style', window.getComputedStyle(elements[i], null).cssText);
            }
        }
        document.body.removeChild(host);
        return host.innerHTML;
    }, html);
}

Then simply call this function in your footer:

page.paperSize = {
    footer: {
        contents: phantom.callback(function(pageNum, numPages) {
            if (pageNum == numPages) {
                return "";
            }
            return replaceClassWithStyle("<h1 class='footer_style'>Footer" + pageNum + " / " + numPages + "</h1>");
        })
    }
};

You will need to move all this inside page.open().

I tested it and the footer is aligned to the right.

Upvotes: 9

Cybermaxs
Cybermaxs

Reputation: 24558

From my past experience, phantomjs does not support styles in custom header/footer.

The only solution that I found is to apply an inline style like this :

var page = require('webpage').create(),
    system = require('system');

if (system.args.length < 3) {
    console.log('Usage: printheaderfooter.js URL filename');
    phantom.exit(1);
} else {
    var address = system.args[1];
    var output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };
    page.paperSize = {
        format: 'A4',
        margin: "1cm",
        footer: {
        height: "1cm",
        contents: phantom.callback(function(pageNum, numPages) {
            return "<h1 style='text-align:right'>Footer" + pageNum + " / " + numPages + "</h1>";
        })
        }
};
page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {                
        window.setTimeout(function () {
            page.render(output);
            phantom.exit();
        }, 200);
    }
});
}

Note : A comma is missing in your code after margin: "1cm"

Upvotes: 3

Related Questions