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 (用setTimeout而非setInterval)
Dec 28 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
Vant picker 多级联动操作
Nov 02 Javascript
js实现简单的轮播图效果
Dec 13 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
德劲1102收音机的打理维修案例
2021/03/02 无线电
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php统计文章排行示例
2014/03/04 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
AngularJS入门教程之更多模板详解
2016/08/19 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
python 远程统计文件代码分享
2015/05/14 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
详解python statistics模块及函数用法
2019/10/27 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
python实现微信打飞机游戏
2020/03/24 Python
python合并多个excel文件的示例
2020/09/23 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
教师评优事迹材料
2014/01/10 职场文书
学生会竞聘书范文
2014/03/31 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
python unittest单元测试的步骤分析
2021/08/02 Python
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers