我正在使用带有幻像模块的nodejs从html生成pdf.
首先,我阅读html模板并用数据填充它,然后将其渲染为pdf.我想用bootstrap css来设置页面的样式,但是在生成的pdf文件中无论如何都要设置样式.
这是我的javascript代码:
var phantom = require('phantom'); var htmlTemplate; fs = require('fs') fs.readFile('template.html', 'utf8', function (err,data) { var htmlTemplate = populateTemplate(data, body) phantom.create(function(ph){ ph.createPage(function(page) { page.set("paperSize", { format: "A4", orientation: 'portrait', margin: '1cm' }); page.setContent(htmlTemplate, "", function(){ page.render("../userdata/test.pdf", function(){ console.log("page rendered"); ph.exit(); }); }); }) }); });
和html模板(简单)看起来像这样:
Title
<%NAME%>
所有标记都呈现为页面,但没有样式.即使我使用本地css文件或在头部元素中包含样式,结果也是一样的
如果正在应用某些 Bootstrap的样式,而不是其他样式,则可以认为它与Bootstrap CSS库和打印存在冲突.某些类,尤其是网格类,例如col-md-
并不总是在打印页面上正确缩放或渲染.如果您在打印正确的网格布局时遇到问题,可以尝试修复这些类.例如:
将每个替换col-md-6
为col-xs-6.
感谢用户Sonam指出这一点.
我还建议看看这个线程的其余部分如何创建可打印的Twitter Bootstrap页面.
但是,如果未应用任何引导样式,则问题的根源可能在加载页面内容和将该页面转换为.pdf文档之间.根据我的经验,调试PDF渲染库总是有点棘手,因为很难看出流程在哪里出错了.您可以尝试以下几种方法:
您可能.render()
在页面加载外部资源(也称为引导程序)之前调用.看看有关在Phantom中渲染PDF的类似问题.解决方案可能是添加超时/延迟以确保已加载页面的外部CSS.
page.set('content')不适用于phantomjs中的动态内容
我应该补充一点 - 还有一些其他原因导致Phantom.js呈现页面无法加载外部资源.确保你已经正确设置了Phantom.js,特别是localToRemoteUrlAccessEnabled
密钥.请参阅下面的StackOverflow问题以供参考:
幻像节点模块无法加载外部资源