PhantomJS：在呈现的 pdf 中忽略外部 CSS答案

【问题标题】：PhantomJS: external CSS is ignored in rendered pdfPhantomJS：在呈现的 pdf 中忽略外部 CSS
【发布时间】：2016-03-14 22:43:33
【问题描述】：

我正在使用带有 phantom 模块的 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>元素中包含样式，结果都是一样的

【问题讨论】：

标签： css node.js phantomjs

【解决方案1】：

如果应用了 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 已加载。

page.set('content') dosen't work with dynamic content in phantomjs

我应该补充一下 - 还有一些其他原因可能会导致 Phantom.js 呈现的页面无法加载到外部资源中。确保您已正确设置 Phantom.js，尤其是 localToRemoteUrlAccessEnabled 键。请参阅下面的 StackOverflow 问题以供参考：

Phantom-node module unable to load external resources

【讨论】：

谢谢，问题似乎是引导 css。有些样式会打印出来，但有些会被忽略。
您能说出正在应用 Bootstrap 中的哪些类和样式吗？这将告诉我更多关于如何解决问题的信息。我知道 Bootstrap 并不总是以打印友好而闻名。这是从引导程序打印的相关线程：stackoverflow.com/questions/12302819/…
网格系统没有得到应用 - row 和 col-xx-y
谢谢 - 解决了。正如SO帖子所建议的那样，有帮助的是用col-xs-类替换col-md-。将其包含在您的答案中，我会接受它作为解决方案。
很高兴听到！使用 Node.js 和 Phantom 进行打印可能会很棘手，所以我很高兴你解决了这个问题。我已经更新了我的原始答案以包含您发现的解决方案。我还包括了我之前的建议，以防将来有类似问题/症状的用户通过 Google 提出这个问题。

【解决方案2】：

当您渲染 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”部分的情况下复制引导 css 文件

【讨论】：