Phantom JS for Node, use print stylesheet? - node.js

Question

I'm using Node JS to generate PDFs.
Is there a way to get Phantom JS to screenshot pages using the print stylesheet instead of the screen one?
At the moment I have the print stylesheet all set up and good to go, but Phantom JS is being recognised as a screen device instead of print.
Here's a snipped of code so you can see what I'm doing.
Thanks in advance!
var date = Date.now();
var images = [];
capture(results.length, 0);
function capture(pagesLength, pageId) {
if (pagesLength <= 0) {
stopCapture();
}
else {
snapshot(pagesLength, pageId);
}
}
function snapshot(pagesLength, pageId) {
phantom.create(function (ph) {
ph.createPage(function (page) {
page.open("http://127.0.0.1:3000/#/pages/" + results[pageId]["_id"], function (status) {
var fileName = results[pageId]["_id"] + ".jpeg";
images.push(fileName);
page.render("public/temp/" + date + "/" + fileName, {format: 'jpeg', quality: '100'}, function () {
pagesLength--;
pageId++;
ph.exit();
if (pagesLength <= 0) {
mergeImages();
} else {
snapshot(pagesLength, pageId);
}
});
});
});
});
}

Answer 1

You cannot change it, because it is hard coded in QtWebkit. There are two approaches that you can try.
First:
If your print stylesheet is separate from the screen styles:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="printstyle.css" type="text/css" media="print" />
then you can remove the screen style and change the media type of the print stylesheet inside evaluate:
Array.prototype.forEach.call(document.querySelectorAll("link:not([media='print']), style"), function(el){
el.parentNode.removeChild(el);
});
Array.prototype.forEach.call(document.querySelectorAll("link[media='print']"), function(el){
el.media = "screen";
});
(^ untested)
This should yield:
<link rel="stylesheet" href="printstyle.css" type="text/css" media="screen" />
and you will probably have to wait a little until phantom applies the styles.
Second:
Compile your own phantomjs version with the changed media type.
You can currently find it under line 125 of src / qt / src / 3rdparty / webkit / Source / WebCore / page / FrameView.cpp:
FrameView::FrameView(Frame* frame)
...
, m_mediaType("screen")
...
(^ also untested)
Change screen to print, compile it and have fun.