我该怎么做才能打印我的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>
我的想法是从数据库中获取数据,并显示在上表中。如果行正确,则通过将成功类添加到行来变为绿色。如果错误(红色和绿色)会有危险。
这只是在浏览网页时显示出来的效果。我怎么试着打印它。那么背景颜色就会消失。我该如何解决这个问题?
答案 0 :(得分:3)
您无法打印表格颜色,因为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通常会有一个内置的最小化器。
答案 1 :(得分:1)
背景颜色的打印是一种浏览器设置,而不是可以用代码控制的东西。
各个浏览器都有大量知识库文章,概述了启用此功能的过程:
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
答案 2 :(得分:0)
添加了以下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;
}