将 wkhtmltopdf 与 Bootstrap 3 一起使用会删除颜色样式答案

【问题标题】：Using wkhtmltopdf with Bootstrap 3 removes color styles将 wkhtmltopdf 与 Bootstrap 3 一起使用会删除颜色样式
【发布时间】：2015-02-09 08:24:25
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： css colors twitter-bootstrap-3 wkhtmltopdf

【解决方案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 已删除此 sn-p。

【讨论】：

@crush 下载less/sass文件自己配置？
很棒的提示。只需将!important 添加到我的颜色规则中，我就可以让颜色显示出来。