How to add PDF page number and total pages with CasperJs and PhantomJS

Question

I have adopted a website and I cannot figure something out. The website uses CasperJS called from the command line, which logs into the site and then generates a PDF from the HTML that is downloaded. I think CasperJS will use PhantomJS for the PDF generation, using capture().

I need to add page numbers and the total pages to the PDF. So Page 1 of 5 for example. But I cannot find any details online how to do this with CasperJS and PhantomJS. Is it possible?

The download process creates the following JS file on the server, which is called below:

var casper = require('casper').create({
    verbose: false,
    logLevel: 'debug',
    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22',
    pageSettings: {
        loadImages:  true,
        loadPlugins: true
    },

});

var url = '{$siteurl}';

casper.start(url, function() {

    this.page.paperSize = {
        width: '11in',
        height: '8.5in',
        orientation: 'landscape',
        border: '0.1in'
    };

    this.fill('form#loginform', {
        ident: 'username',
        password: 'password'
    }, true);
});

var url = '{$siteurl}/pdf/{$twigDate}/{$clubId}/{$sessionId}';

casper.then(function() {

    casper.start(url, function() {

        this.capture('{$genPdf}');

    });
});

casper.run();

Then the above file is called with:

$exe = shell_exec('/usr/bin/casperjs --ignore-ssl-errors=true --ssl-protocol=any ' . INC_ROOT . '/pdf/registers/' . $filename . ' 2>&1');

Thanks

Answer 1

PhantomJS

PhantomJS has a paperSize property that defines the size of the web page when rendered as a PDF.

The paperSize property has header and footer subproperties that allow for repeating page headers and footers.

PhantomJS provides the following example on how to accomplish this task:

var webPage = require('webpage');
var page = webPage.create();

page.paperSize = {
  width: '8.5in',
  height: '11in',
  header: {
    height: '1cm',
    contents: phantom.callback(function (pageNum, numPages) {
      return '<h1>Header <span style="float:right">' + pageNum + ' / ' + numPages + '</span></h1>';
    }),
  },
  footer: {
    height: '1cm',
    contents: phantom.callback(function (pageNum, numPages) {
      return '<h1>Footer <span style="float:right">' + pageNum + ' / ' + numPages + '</span></h1>';
    }),
  },
};

Note: A more detailed example can be found in printheaderfooter.js in the examples folder.

---

CasperJS

CasperJS allows you to use the page option to access an existing PhantomJS WebPage instance.

In other words, after casperjs.start(), the PhantomJS page module is available in casper.page.

You can access the paperSize attribute in CasperJS using casper.page.paperSize.

casper.page.paperSize = {
  width: '8.5in',
  height: '11in',
  header: {
    height: '1cm',
    contents: phantom.callback(function (pageNum, numPages) {
      return '<h1>Header <span style="float:right">' + pageNum + ' / ' + numPages + '</span></h1>';
    }),
  },
  footer: {
    height: '1cm',
    contents: phantom.callback(function (pageNum, numPages) {
      return '<h1>Footer <span style="float:right">' + pageNum + ' / ' + numPages + '</span></h1>';
    }),
  },
};