Add image in header using html-pdf node module

Question

I am using this to convert the html to PDF.The conversions are really good.But the problem is to add header and footer in the PDF pages.In the options if i add the header text i got the result what i expected.

//Options

    var options = {
    "header": {
        "height": "45mm",
        "contents": "<div style='text-align: center;'>Author: Marc Bachmann</div>" // If i add image in content it wont work
    // sample i tried 
      },
      "footer": {
        "height": "28mm",
        "contents": "<span style='color: #444;'>{{page}}</span>/<span>{{pages}}</span>"
      }
    }
// Tried this in contents <img src="image path" />
    var result = <div class="container"> HTML CONTENT</div>';

        pdf.create(result, options).toFile(fileName + ".pdf", function(err, res) {
        if (err) {
        console.error(err);
        callback();
        }

Then if i add the image tag in the header(contents) option i didn't get the image in the generated PDF. Can you please give me a solution for this thanks.

Answer 1

It is possible to add the image in options header. 1.Load the image in html body with "display:none" style. 2.Then add the image in the options header By doing this the image is cached and can attach the image in header.

    var options = {
    "format": 'Letter',
    "orientation": "portrait",
    "header": {
    "contents": "<img src='image path' />",
        "height": "30mm"
  },
  "footer": {
    "contents": footer
  }
}
pdf.create("<div style='display:none'><img src='image path' /></div>", options).toFile("sample.pdf", function(err, res) {
        if (err) {
                console.error(err);
                callback();
        } 
});

Answer 2

Refering to this issue on the github, you can't put your image directly in options.header, you have to put it in the body inside a <div id="pageHeader"></div>:

var pdf = require('html-pdf');
var path = require('path');

// this is very important, you have to put file:// before your path
// and normalize the resulting path
var imgSrc = 'file://' + __dirname + '/350x120.png';
imgSrc = path.normalize(imgSrc);
// or var imgSrc = path.join('file://', __dirname, '/350x120.png');

// Options
var options = {
    "header": {
      "height": "45mm",
      "contents": ""
    },
    "footer": {
      "height": "28mm",
      "contents": "<span style='color: #444;'>{{page}}</span>/<span>{{pages}}</span>"
    }
  }
// put your entire header here and the content of the page outside the <div id="pageHeader"></div>
var result = "<div id='pageHeader'><img src='" + imgSrc + "' /><div style='text-align: center;'>Author: Marc Bachmann</div></div>";
result += "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>";
var fileName = __dirname + '/test.pdf';
pdf.create(result, options).toFile(fileName, function(err, res) {
  if (err) {
    console.error(err);
  }
});

With this code, I get this pdf:

Answer 3

Created a simple NPM module for this purpose that can add arbitrary HTML and CSS to an existing PDF.

const pdf = require('add-html-to-pdf');

var options = {
  input: 'sample.pdf',
  output: 'done.pdf',
  html: "<div style='text-align: center;'>Author: Marc Bachmann</div>",
}

pdf.insertHTMLInPDF(options);

Answer 4

Maybe will be helpful for someone.

Shanoor answer is correct and code example he provided works well if you don't set "base" property for options.

So remove "base" property and make path full.

One more way to get the path to the image. This snippet

var projectRoot = process.cwd();
projectRoot = projectRoot.replace(/\\/g,'/');
var imgBase = 'file:///' + projectRoot + 'path to the image';

Will return something like this file:///C:/project folder/path to the image/img1.jpg