Question

我尝试使用SSR软件包和wkhtmltopdf从Meteor创建pdf报告。事情进展顺利，除了一件事：当我链接bootstrap 3时，我失去了所有颜色。列格式，表格格式等都很好，但黑色上的所有内容都是白色的。即使我使用内联css，我得到的只是白色的黑色。

如果我删除了boostrap链接，所有颜色都会按预期方式通过。

这是我正在渲染的模板：

<Template name="spaceUtilSpacePDF">
    <html>
        <head> 
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        </head>
        <body>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-4">
                        <div class="well">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td class="bg-danger"> Stuff</td>
                                    <td style="background-color:blue"> Stuff</td>
                                    <td style="color:red"> Stuff</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                                   </div>
            </div>
            <div style="page-break-after:always"></div>
            <button class="btn btn-danger">Test Button</button>

        </body>
    </html>

</Template>

Answer 1

这可能是因为the following snippet from the HTML5 Boilerplate that's included in Bootstrap v3:

/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
// ==========================================================================
// Print styles.

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important; // Black prints faster: h5bp.com/s
    //...
  }

您可以从您的Bootstrap副本中删除它，或尝试覆盖它。

请注意，Bootstrap v4已删除此代码段。

使用带有Bootstrap 3的wkhtmltopdf可以删除颜色样式

1 个答案: