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


Posted in Javascript onNovember 06, 2016

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Regonline</title>
 <link href="css/bootstrap.css" rel="stylesheet" />
 <link href="css/font-awesome.min.css" rel="stylesheet" />
</head>

<body>

 <style>

  .main{

   overflow: hidden;
   padding: 40px;
  }

  .one, .two, .three{

   float: left;

   height: 40px;
  }

  .one{

   width: 40%;
   background-color: red;
  }

  .two{

   width: 30%;
   background-color: green;
  }

  .three{

   width: 30%;
   background-color: pink;
  }


 </style>
  
  <div class="main">
   <div class="one"></div>
   <div class="two"></div>
   <div class="three"></div>
  </div>
</body>

</html>

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

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

@media print {
 * {
 color: #000 !important;
 text-shadow: none !important;
 background: transparent !important;
 box-shadow: none !important;
 }
 a,
 a:visited {
 text-decoration: underline;
 }
 a[href]:after {
 content: " (" attr(href) ")";
 }
 abbr[title]:after {
 content: " (" attr(title) ")";
 }
 a[href^="javascript:"]:after,
 a[href^="#"]: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;
 }
 .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!

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

总结

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

Javascript 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
js 自动播放的实例代码
Nov 19 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
JavaScript图片处理与合成总结
Mar 04 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
JavaScript实例 ODO List分析
Jan 22 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 #Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 #Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 #Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 #Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 #Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 #Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 #Javascript
You might like
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
解析argc argv在php中的应用
2013/06/24 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
PHP 类与构造函数解析
2017/02/06 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
Python中的类学习笔记
2014/09/23 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python实现大文件排序的方法
2015/07/10 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
ktv周年庆活动方案
2014/08/18 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
员工福利申请报告
2015/05/15 职场文书
教师外出学习心得体会
2016/01/18 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS