Phantomjs: PhantomJS (2.1.1) does not render image in footer unless it has been rendered in content

Created on 6 Apr 2016 · 3Comments · Source: ariya/phantomjs

As I cannot reopen closed issues, I create a new one, referring to #12887

I am using PhantomJS 2.1.1 on Windows 7.

The problem is the same which already has been discribed in #12887. But I want to add a small script to reproduce it. You just have to adjust the path to the image and the path for the PDF output.

var page = require('webpage').create();
var imageFilename = 'file:///C:/path/to/my.jpg';

page.paperSize = {
    "format":"A4",
    "header":{
        "height":"35mm",
        "contents":phantom.callback(function(pageNum, numPages) {
            return '<img src="' + imageFilename + '">';
        })
    }
};

page.setContent('<html><body>Hello'
 //+ '<img src="' + imageFilename + '">'
 + '</body></html>', 'http://example.com');

page.onLoadFinished = function(status) {
    page.render('C:\\path\\to\\my.pdf', {format: 'pdf'});
    phantom.exit();
};

Now, if you execute this script, it won't render the image in the header. But if you uncomment the commented line, it will render the image in the header and in the content.

stale

Source

naitsirch

Most helpful comment

I read somewhere in the documentation, that the rendering of header and footer does not allow asynchronous requests. That means, now links to content which needs to be loaded, nothing.

That is also the case for CSS style sheets if you refer them in your header. Header and footer are very special. I see also a problem with a white box in header and footer which is always produced by phantomJS.

You can either prepare your data (images) and embed them as base64 encoded strings, or you place the content in the webpage (hidden) and then use it in the header and footer. Both ways can be found in several stack overflow articles.

andre baresel

andrebaresel on 15 Jul 2016

👍4

All 3 comments

I read somewhere in the documentation, that the rendering of header and footer does not allow asynchronous requests. That means, now links to content which needs to be loaded, nothing.

andre baresel

andrebaresel on 15 Jul 2016

👍4

I'm having the same problem and tried with the base64 encoded string with no luck. My callback return this:

return "<img src='data:image/png;base64,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'>"

Pasting this into an html file is working, so the syntax should be OK. But PhantomJS still doesn't show it.

jurgenhaas on 24 Nov 2016

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!