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

【问题标题】：Add image in header using html-pdf node module使用 html-pdf 节点模块在标题中添加图像
【发布时间】：2016-05-22 00:21:08
【问题描述】：

我正在使用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 中获得图像。你能给我一个解决方案吗谢谢。

【问题讨论】：

你解决过这个问题吗？所选答案似乎不起作用

标签： node.js npm pdf-generation

【解决方案1】：

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

例子：

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

【讨论】：

【解决方案2】：

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

喜欢这个

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

我认为这将成功加载图像和 CSS。希望这对其他人有所帮助。

【讨论】：

【解决方案3】：

也许会对某人有所帮助。

Shanoor 的答案是正确的，如果您不为选项设置“基本”属性，他提供的代码示例效果很好。

所以删除“base”属性并使路径变满。

另一种获取图像路径的方法。这个sn-p

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

将返回类似 file:///C:/project 文件夹/image/img1.jpg 的路径

【讨论】：

如果我包含 id='pageHeader' 图像不可见，否则显示

【解决方案4】：

为此目的创建了一个简单的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);

【讨论】：

【解决方案5】：

可以在选项标题中添加图像。 1.以“display：none”样式加载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();
        } 
});

【讨论】：

【解决方案6】：

参考github上的this issue，你的图片不能直接放在options.header里面，你得把它放在body里面一个<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：

【讨论】：

感谢您的回复...在这里您创建了 html 并将其传递给包。但我需要从选项标题设置图像（以便它会复制所有生成的 pdf）。那么是否可以从选项标头本身设置图像？
自动引用自己：你不能把你的图片直接放在 options.header 中。您可以将 <div id="pageHeader"></div> 存储在一个变量中，并将其附加到所有 pdf 的正文中。
所以我们应该在每个页面的 html 本身中都有图像？但是仍然可以在选项标题中重复文本。
感谢您的帮助。珊珊:)
如果我包含 id='pageHeader' 图像不可见，否则显示