Add image in header using html-pdf node module

node.js npm pdf-generation

14,965

Solution 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();
        } 
});

Solution 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:

generated pdf

Solution 3

For me helped using full file path. If using short path, the image becomes hidden.

Example:

<body>
<div id="pageHeader" class="header">
    <div>
        <img src="file:///C://Users//ostrovskii//Documents//2020-06-20_18-20-33_531//attachments//logo.JPG" alt="Агентство" class="render" />
    </div>
</div>

Solution 4

I found a simple and easy way to do it and you can put your image source path into your HTML.

like this

<div class="img">
            <img src="file:///C:/Users/mdjac/Desktop/NCC/public/img/showcase-1.jpg" width="100px" height="100px" alt="">
        </div>

This will work successfully to load the images and also CSS I think so. Hopefully, this is helpful for other people.

View more solutions

14,965

Author by

venkats

Updated on June 26, 2022

Comments

venkats about 2 years

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.

venkats over 8 years

Thanks for your reply... Here you are created the html and pass it to the package.But i need to set the image from options header (So that it will replicate all the generated pdfs).So is it possible to do that set image from options header itself ?
Shanoor over 8 years

Auto-quoting myself: you can't put your image directly in options.header. You can store the <div id="pageHeader"></div> in a variable and append it to the body of all your pdf.
venkats over 8 years

So we should have the image in the html itself for every page ?.But still the text can be repeated in the options header.
venkats over 8 years

Thanks for your help . ShanShan :)
Vishnu over 5 years

If i am include id='pageHeader' image is not visible otherwise its showing
Vishnu over 5 years

If i am include id='pageHeader' image is not visible otherwise its showing