使用 html-pdf 节点模块在 header 添加图像
[英]Add image in header using html-pdf node module
问题描述
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.
我正在使用它来将 html 转换为 PDF。转换非常好。但问题是在 PDF 页面中添加 header 和页脚。在选项中，如果我添加 header 文本，我得到了我预期的结果。
//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.然后，如果我在标头（内容）选项中添加图像标签，我在生成的 PDF 中没有得到图像。你能给我一个解决方案吗？谢谢。
7 个解决方案
解决方案1
15 已采纳 2016-02-12 04:59:30
It is possible to add the image in options header.可以在选项标题中添加图像。 1.Load the image in html body with "display:none" style. 1.以“display:none”样式在html正文中加载图像。 2.Then add the image in the options header By doing this the image is cached and can attach the image in header. 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();
}
});
解决方案2
9 2016-02-11 12:32:58
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> :参考github上的这个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);
}
});
With this code, I get this pdf:有了这个代码，我得到了这个pdf：
解决方案3
2 2020-06-20 15:28:27
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>
解决方案4
1 2020-04-11 12:57:20
I found a simple and easy way to do it and you can put your image source path into your HTML.我找到了一种简单易行的方法，您可以将图像源路径放入 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.这将成功加载图像和 CSS 我认为是这样。 Hopefully, this is helpful for other people.希望这对其他人有帮助。
解决方案5
0 2018-06-30 01:04:05
Created a simple NPM module for this purpose that can add arbitrary HTML and CSS to an existing PDF.为此创建了一个简单的NPM 模块，可以将任意 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);
解决方案6
0 2018-08-12 09:09:38
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. Shanoor 的答案是正确的，如果您没有为选项设置“base”属性，他提供的代码示例可以很好地工作。
So remove "base" property and make path full.所以删除“base”属性并使路径完整。
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将返回类似于 file:///C:/project folder/path to the image/img1.jpg
解决方案7
0 2023-01-03 07:24:28
SIMPLE PUT THAT IMAGE STATIC INTO YR HTML FILE LIKE THIS THEN CALL IT INTO API.简单地将图像 STATIC 放入 YR HTML 文件，然后将其调用到 API。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello world!</title>
</head>
<body>
<div>
<img src="YOUR IMAGE PATH"/>
</div>
<h1>ABC</h1>
<ul>
<li>Name: ABC </li>
<li>Age: ABC </li>
<br />
{{/each}}
</ul>
</body>
</html>
解决方案8
-2 2022-01-11 16:53:40
“localUrlAccess”：真
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.