我正在使用带有幻像模块的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模板（简称）看起来像这样：
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/paper/bootstrap.min.css", rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<div class="container">
<h1>Title</h1>
<%NAME%>
</div>
</body>
</html>
所有标记都呈现为页面，但没有样式。即使我使用本地css文件或在头部的<style>元素中包含样式，结果也是一样的
如果正在应用某些Bootstrap的样式，而不是其他样式，则可以认为它与Bootstrap CSS库和打印存在冲突。某些类，尤其是网格类（如col-md-）并不总是在打印页面上正确缩放或渲染。如果您在打印正确的网格布局时遇到问题，可以尝试修复这些类。例如：
col-md-6替换为col-xs-6.Thanks to user Sonam for pointing this out.
我还建议看一下这个线程的其余部分如何create printable Twitter Bootstrap page。
但是，如果未应用任何引导样式，则问题的根源可能在加载页面内容和将该页面转换为.pdf文档之间。根据我的经验，调试PDF渲染库总是有点棘手，因为很难看出流程在哪里出错了。您可以尝试以下几种方法：
您可能在页面加载外部资源（也称为引导程序）之前调用.render()。看看有关在Phantom中渲染PDF的类似问题。解决方案可能是添加超时/延迟以确保已加载页面的外部CSS。
我应该补充一点 - 还有一些其他原因导致Phantom.js呈现页面无法加载外部资源。确保你已经正确设置了Phantom.js，特别是localToRemoteUrlAccessEnabled键。请参阅下面的StackOverflow问题以供参考：
渲染PDF时，PhantomJs使用css规则进行“@media print”
在Bootstrap中存在“@media print”的规则
@media print{
*,
*:before,
*:after {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
....
这个css规则可以覆盖你的css规则，忽略任何背景，任何字体颜色等等。
我修复了这种情况，制作了没有“@media print”部分的bootstrap css文件的副本