Is it possible to include external HTML files as headers and footers when rendering to PDF with PhantomJS?
I am trying to customize the way HTML files are displayed in PDF. HTML files are dynamically generated and have separate HTML files for their headers and footers that need to be anchored to each page.
Can I get PhantomJS to collect these separate files and display them in the header and footer sections? I can get headers and footers when I have HTML for them in the javascript files that I pass to PhantomJS, as in the example code I have included, but I am not familiar with HTML, CSS, Javascript (and Node?) Enough to know if there is a clear-cut way of doing what I want.
This is what I have at the moment:
var page = require('webpage').create();
//set the page size and add headers & footers
page.paperSize = {
format: 'A4',
margin: '.5cm',
header: {
height: "1cm",
contents: phantom.callback(function(pageNum, numPages) {
return "<h1 style='font-size:12.0; font-family:Arial,Helvetica,FreeSans,sans-serif'>Header <span style='float:right'>" + pageNum + " / " + numPages + "</span></h1>";
})
},
footer: {
height: "1cm",
contents: phantom.callback(function(pageNum, numPages) {
return "<h1 style='font-size:12.0; font-family:Arial,Helvetica,FreeSans,sans-serif'>Footer <span style='float:right'>" + pageNum + " / " + numPages + "</span></h1>";
})
}
}
//open the page
page.open('tools.html', function() {
page.render('woki2.pdf');
phantom.exit();
});
It works to add headers and footers, but requires inline styling (which I believe I can get around with these methods ), but I would prefer external external HTML files so that: a) different headers and footers can used depending on the type of file that was converted; and b) so that HTML files can be easily edited without changing the JS files.
This is an example HTML header file:
<!DOCTYPE html>
<html>
<head>
<script>
function subst() {
var vars = {};
var x = window.location.search.substring(1).split('&');
for (var i in x) {
var z = x[i].split('=', 2);
vars[z[0]] = unescape(z[1]);
}
var x = ['frompage', 'topage', 'page', 'webpage', 'section', 'subsection', 'subsubsection', 'date', 'time'];
for (var i in x) {
var y = document.getElementsByClassName(x[i]);
for (var j = 0; j < y.length; ++j) y[j].textContent = vars[x[i]];
}
}
</script>
</head>
<body style="border:0; margin: 0;" onload="subst()">
<table style="width: 100%">
<tr>
<td>Generated by *person* on <span class="date"></span> <span class="time"></span></td>
<td style="text-align:right">
Page <span class="page"></span> of <span class="topage"></span>
</td>
</tr>
</table>
</body>
</html>
While I know that I can achieve a similar thing to what is presented there with the first example, I would prefer that the files be split if possible.
source to share