Question

我正在使用带有幻像模块的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>元素中包含样式，结果也是相同的

Answer 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

Answer 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文件的副本

PhantomJS：在渲染的pdf中忽略外部CSS

2 个答案: