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>

我的想法是从数据库中获取数据，并显示在上表中。如果行正确，则通过将成功类添加到行来变为绿色。如果错误（红色和绿色）会有危险。

这只是在浏览网页时显示出来的效果。我怎么试着打印它。那么背景颜色就会消失。我该如何解决这个问题？

Answer 1

您无法打印表格颜色，因为bootstrap具有阻止此操作的css @media print规则。有一段时间，我知道我在互联网上的其他地方找到了一个很好的修复，但是当我升级我的引导版本时，我意外删除了它。（因此，为什么我在这里找到了自己的方式。）如果您查看第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行。如果您更喜欢使用最小化版本的引导程序，则需要在那里找到相同的行或最小化非最小化的行。有网站可以为您做到这一点，以及许多IDE通常会有一个内置的最小化器。

Answer 2

背景颜色的打印是一种浏览器设置，而不是可以用代码控制的东西。

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

Internet Explorer＆gt; https://support.microsoft.com/en-us/kb/296326
谷歌浏览器＆gt; https://productforums.google.com/forum/#!topic/chrome/rywToswM-EY
Mozilla Firefox＆gt; https://support.mozilla.org/en-US/kb/how-print-websites#w_advanced-tips

Answer 3

添加了以下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;
}

颜色没有在印刷品上显示

3 个答案: