Add image in header using html-pdf node module

后端未结

关注

 6  1084

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

相关标签:

6条回答

没有蜡笔的小新

2021-02-13 23:42

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

0 讨论(0)

闹比i

2021-02-13 23:43
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
0 讨论(0)
发布评论:

提交评论
- 加载中...

长发绾君心

2021-02-13 23:44

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);

0 讨论(0)

执笔经年

2021-02-13 23:47
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

南笙

2021-02-13 23:53

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

0 讨论(0)

余生分开走

2021-02-13 23:56

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>

0 讨论(0)