打印时未显示颜色

Question

我怎样才能在打印 html 页面时保持颜色（打印为 pdf）

<table class="table table-responsive table-striped">
        <thead>
            <tr>
                <th>Elev</th>
                <th>Session navn</th>
                <th>Spørgsmål</th>
                <th>Svar</th>
                <th>Rigtigt svar</th>
                <th>Dato</th>
            </tr>
        </thead>
        <tbody>
                <tr class="success">
                        <td>test</td>
                        <td>testing</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <button class="btn btn-block btn-default" onclick="deactivate">Deaktiver</button>
                </td>
                <td style="text-align:right">#3</td>
            </tr>
        </tfoot>
    </table>

我的想法是从我的数据库中获取数据，并显示在上面的 table 中。如果该行是正确的，则通过向该行添加成功 class 使其变为绿色。如果错误（红色和绿色）会有危险。

浏览网页时显示效果很好。当我尝试打印它时如何。然后背景着色关闭。我该如何解决这个问题？

Answer 1

背景颜色的打印是浏览器设置，不是代码可以控制的。

有大量适用于各个浏览器的知识库文章概述了启用此功能的过程：

Internet Explorer > https://support.microsoft.com/en-us/kb/296326
Google Chrome > https://productforums.google.com/forum/#!topic/chrome/rywToswM-EY
Mozilla Firefox > https://support.mozilla.org/en-US/kb/how-print-websites#w_advanced-tips

Answer 2

添加了以下内容css，并且有效

tr.success td {
    background-color: #dff0d8 !important;
    -webkit-print-color-adjust: exact;
}

tr.danger td {
    background-color: #f2dede !important;
    -webkit-print-color-adjust: exact;
}

Answer 3

您不能打印 table 颜色，因为 bootstrap 有一个 css @media print 规则阻止这种情况。有一次，我知道我在互联网上的其他地方找到了一个很好的修复程序，但是当我升级我的 bootstrap 版本时，我不小心删除了它。（因此，为什么我找到了这里。）如果你查看第 196-269 行之间的 bootstrap.css 文件（Bootstrap 版本 3.3.4，而不是最小化文件 bootstrap.min.css），你将找到执行此操作的规则。

196  @media print {
197  *,
198  *:before,
199  *:after {
200  background: transparent !important;
...
264  }
265  .table-bordered th,
266  .table-bordered td {
267  border: 1px solid #ddd !important;
268  }
269  }

一种选择是完全删除规则或删除实用行。选项一的问题是此媒体规则还执行诸如删除导航栏和文本阴影之类的操作，因此最好选择选项二。我在下面插入了修改后的规则版本，它可能仍需要一些微调，并且如果您使用 bootstrap.

的不同版本，它会有所不同

@media print {
    *, *:before, *:after {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a, a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    a[href^="#"]:after, a[href^="javascript:"]:after {
        content: "";
    }
    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    thead {
        display: table-header-group;
    }
    tr, img {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
    }
    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }
    h2, h3 {
        page-break-after: avoid;
    }
    select {
        background: #fff !important;
    }
    .navbar {
        display: none;
    }
    .btn> .caret, .dropup> .btn> .caret {
        border-top-color: #000 !important;
    }
}

我删除了第 200、201 和 255-268 行。如果您更喜欢使用 bootstrap 的最小化版本，您将需要在那里找到相同的行或最小化您的非最小化行。网上有一些网站可以为您做这件事，而且许多 IDE 通常都有一个内置的最小化器。

打印时未显示颜色

colors not showing at print

html

css

printing

twitter-bootstrap