PhantomJS：外部CSS在呈现的pdf中被忽略
我正在使用phantom模块的nodejs从html生成pdf。
首先，我读了html模板，并用数据填充它，并将其呈现为pdf。 我想使用引导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>
所有的标记都呈现给页面，但没有样式。 即使我在头部的<style>元素中使用本地css文件或包含样式，结果也是一样的
如果Bootstrap的某些样式正在被应用，但是其他样式不能被使用，那么可以认为这与Bootstrap CSS库和打印有冲突。 某些类，特别是网格类（如col-md-并不总是在打印页面上正确缩放或渲染。 如果您无法正确打印网格布局，可以尝试修复这些类。 例如：
- 将每个
col-md-6replace为col-xs-6.
感谢用户Sonam指出这一点。
我还build议看看这个线程的其余部分关于如何创build可打印的Twitter Bootstrap页面 。
但是，如果没有应用引导程序样式 ，则问题的根源可能在加载页面内容和将该页面转换为.pdf文档之间。 根据我的经验，debuggingPDF渲染库总是有点棘手，因为很难看到stream程中哪里出错。 有几件事你可以尝试：
您可能在页面加载外部资源（又名bootstrap）之前调用.render() ）。 看看这个关于在Phantom中渲染PDF的类似问题。 解决scheme可能是添加超时/延迟，以确保页面的外部CSS已被加载。
- page.set（'content'）不能在phantomjs中使用dynamic内容
我应该添加 – 还有其他一些原因可能会导致Phantom.js呈现页面无法加载到外部资源中。 确保你已经正确设置了Phantom.js，尤其是localToRemoteUrlAccessEnabled键。 请参阅下面的StackOverflow问题以供参考：
- 幻影节点模块无法加载外部资源