使用bootstrap 网页打印 文字颜色丢失

Posted 2023-03-24

不知道大家有没有遇到过这样一个问题，如果应用了bootstrap.css， 当使用网页打印时，文字的颜色都会丢失，div中的背景色也会丢失。不信可以看看bootstrap的官网。

为了方便打印省墨，这么设置挺合理的，如果想打印整个网页的样式和颜色可以保存成图片再打印效果更好。 参考技术A 可以参考一下Bootstrap打印部分的样式，可以根据自己的需要进行样式的配置。
如果打印需求比较细致，可以单独给打印媒体单独设置一系列的样式。具体可以百度，呵呵。 参考技术B

在bootstrap.css中，专门有针对打印的设置，注意第4行。

@media print

  *

    text-shadow: none !important;

    color: #000 !important;

    background: transparent !important;

    box-shadow: none !important;

 

参考技术C 添加html5.js 引用即可