使用html-pdf节点模块在标题中添加图像
使用html-pdf节点模块在标题中添加图像
提问于 2016-02-11 17:45:24
我正在使用this来转换的html到PDF.The转换真的good.But的问题是添加页眉和页脚在pages.In的选项，如果我添加标题文本，我得到了我所期望的结果。
//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();
}然后，如果我在header(contents)选项中添加图像标记，我在生成的PDF中就得不到图像。你能给我一个解决方案吗?谢谢。
回答 6
Stack Overflow用户
回答已采纳
发布于 2016-02-12 12:59:30
可以在options header中添加图像。1.将图片加载到html body中，样式为display:none。2.然后在options header中添加图像。通过执行此操作，图像将被缓存，并可以将图像附加到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();
}
});Stack Overflow用户
发布于 2016-02-11 20:32:59
参考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：
Stack Overflow用户
发布于 2020-06-20 23:28:28
对我来说，使用完整的文件路径是有帮助的。如果使用短路径，图像将变为隐藏状态。
示例：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35335698
复制相关文章
相似问题