Add image in header using html-pdf node module

后端未结

关注

 6  1579

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

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:39
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:46

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)

梦如初夏

2021-02-13 23:48

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)

野的像风

2021-02-13 23:52

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:58
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)
发布评论:

提交评论
- 加载中...