Question

我正在使用this将html转换为PDF。转换非常好。但问题是在PDF页面中添加页眉和页脚。在选项中，如果我添加标题文本，我得到了结果是我所期待的。

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

然后，如果我在标题（内容）选项中添加图像标记，我没有在生成的PDF中获取图像。能否请你帮我解决这个问题。

Answer 1

可以在选项标题中添加图像。 1.用＆＃34; display：none＆＃34;加载html体内的图像。样式。 2.然后在选项标题中添加图像通过这样做，图像被缓存并可以将图像附加到标题中。

    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

请参阅github上的this issue，您无法将图片直接放在options.header中，您必须将其放在<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);
  }
});

使用此代码，我得到这个pdf：

generated pdf

Answer 3

我找到了一种简单的方法，可以将图像源路径放入HTML中。

像这样

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

这将成功加载图像以及我认为是CSS的图像。希望这对其他人有帮助。

Answer 4

对我来说，帮助使用完整的文件路径。如果使用短路径，图像将被隐藏。

示例：

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

Answer 5

为此创建了一个简单的NPM module，可以将任意HTML和CSS添加到现有的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 6

也许会对某人有所帮助。

Shanoor的答案是正确的，并且如果您未为选项设置“ base”属性，则他提供的代码示例效果很好。

因此，请删除“基本”属性并使路径完整。

另一种获取图像路径的方法。这个片段

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

将返回类似以下文件的文件：/// C：/ project文件夹/图像/img1.jpg的路径

使用html-pdf节点模块在标头中添加图像

6 个答案: