Bootstrap 3.x打印预览背景色与文字显示异常的解决

Bootstrap 2019-01-01

我首先测试了一段如下的代码，发现打印预览时的确无法显示背景色。

<Meta charset="utf-8"> Regonline

比较奇怪的是，如果我删除bootstrap的样式引用，就可以正常打印预览了。想来必定是bootstrap3 设置了@media print相关属性导致。

果然，翻开源码,发现如下代码：

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;
}
.table td,.table th {
background-color: #fff !important;
}
.btn > .caret,.dropup > .btn > .caret {
border-top-color: #000 !important;
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table-bordered th,.table-bordered td {
border: 1px solid #ddd !important;
}
}

注意代码里面的 color:#000 !important; 以及 background-color:transparent !important;。它表示打印时，页面中的文字都为黑色，并且背景色都设置为透明。因为有了这样的样式，我们的背景色就打印

不出来了。去掉这两段代码，一切OK！

值得一提的说：如果页面中有超链接，打印时会显示超链接的地址，这样比较难看。我们删除对应的样式即可。