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

前端之家收集整理的这篇文章主要介绍了Bootstrap 3.x打印预览背景色与文字显示异常的解决前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

<Meta charset="utf-8"> Regonline

<div class="main">
<div class="one">


<div class="two">

<div class="three">

比较奇怪的是,如果我删除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!

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

猜你在找的Bootstrap相关文章