Generate pdf files phantomjs, repeating HEADER

Question

I'm generating pdf files using phantomjs but I would like to repeat a defined header with HTML, it works when there are no images but as soon I add it doesn't work

page.viewportSize = { width: 600, height: 600 };
page.paperSize = {
  format: 'A4', orientation: 'portrait', margin: '0px',
  header: {
    height: "1.2cm",
    contents: phantom.callback(function(pageNum, numPages) {
      return '<img src="https://www.google.com.bo/images/srpr/logo4w.png" height="0.95cm"/>';
    })
  },
  footer: {
    height: "0.7cm",
    contents: phantom.callback(function(pageNum, numPages) {
      return '<h3 class="header">Footer</h>';
    })
  }
}

Answer 1

It works with patch from https://github.com/ariya/phantomjs/pull/359
To install it:

git clone git://github.com/ariya/phantomjs.git
cd phantomjs
git checkout 1.9

edit [remote "origin"] part in .git/config
[remote "origin"]
    fetch = +refs/heads/*:refs/remotes/origin/*
    url = https://github.com/ariya/phantomjs.git
    fetch = +refs/pull/*/head:refs/remotes/origin/pr/*

git fetch
git merge pr/359
./build.sh

Answer 2

Hacky way around this, pre-cache the image on your page by putting the img in body with a display: none;.

<img src="https://www.google.com.bo/images/srpr/logo4w.png" height="0.95cm" style="display: none;"/>

Then have the img tag in your header and/or footer as well.

This is required because the header and footer do not wait for the html to be finished loading before continuing to raster. It needs to be improved to be more Async and is a known bug.

Since header and footer are processed after the page has fully loaded the image will be available for them too use. This also works with base64 image source.