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

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

<!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!

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

总结

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

时间: 2016-11-04

关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案

关于Lodop打印是个很牛逼的打印插件,但是打印Bootstrap的样式的时候很恶心 比如:页面是这样 打印之后的效果恶心的不要不要的 单独修改后的样式 出现这样的问题就是可能是bs把这个插件当做手机显示了,也可能是这样插件对bs集成不行 lodop对常规html+css还是不错的,下面丢上bs版的代码 控件对应html+js使用代码 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind=&qu

基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作

在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理,并介绍如何利用CLODOP组件实现内容的打印输出. 生成条形码使用组件JsBarcode,生成二维码使用组件qrcodejs. 1.条形码的生成 条码的作用一般在一些商品标签上,方便使用条码枪快速.准确录入信息. 如下所示是一种条形码 这里条形码生成使用了JsBarcode组件进行处理,它支持很多

基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作

本篇文章主要介绍如何实现Web页面内容的打印预览和保存操作的相关知识,一起学习吧! 1.Web页面打印的问题 在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预览,打印等操作,还是很方便的一个控件,因此都很适合普通内容的打印,证件的套打等操作. 不过随着浏览器技术的更新,这个插件在Chrome或者FireFox上好像不受支持了,基本上摒弃了这种插件的处理方式了.例如如果我

bootstrap PrintThis打印插件使用详解

bootstrap PrintThis打印效果图: 如图,这个是调用了谷歌的打印,使用很方便,可以自己調样式,需要的可以研究一下,这边贴出使用方法. 附上GitHub:https://github.com/jasonday/printThis jsp: <script src="<%=basePath %>bootstrap/js/printThis.js"></script> <!-- 二维码弹出框 --> <div class=

第十篇BootStrap轮播插件使用详解

Bootstrap 轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js. 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码. 效果图如下所示: 关键代码如下: <div id="carousel-example-generic" c

Bootstrap模态框插件使用详解

本文主要学习Bootstrap 中的模态框插件,这是一款交互式网站非常常见的弹窗功能插件. 1.基本使用 使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层).dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). 结合具体演示来理解如下内容: <!-- 模态框的声明 class="modal show" 显示模态框 fade淡入淡出效果--> <

bootstrap table表格插件使用详解

bootstrp-table学习,具体内容如下 $table.bootstrapTable({ url: '../data/data1.json', striped: true, minimumCountColumns: 2, clickToSelect: true, detailView: true, detailFormatter: 'detailFormatter', pagination: true, paginationLoop: false, classes: 'table tabl

BootStrap中Table分页插件使用详解

分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. bootstrap-table介绍 bootstrap-table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化. 下载地址 https://github.com/wenzhixin/bootstrap-table/archive/1.11.0.zip 使用方式 引入css和js <!--css样式--> <link href=&qu

Bootstrap 附加导航(Affix)插件实例详解

附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置.您也可以在打开或关闭使用该插件之间进行切换.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动. 如果您想要单独引用该插件的功能,那么您需要引用 affix.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用bootstrap.js 或压缩版的 bootstrap.min.js. 用法 您可以通过 data 属

基于Bootstrap3表格插件和分页插件实例详解

首先看下实现效果图,如果觉得还不错,请参考实现代码. 上面数据 下面分页 使用方法 1 导入bootstrap的css <link rel="stylesheet" href="css/v3/bootstrap.min.css"> 2 导入jquery <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>

jQuery实现区域打印功能代码详解

使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO中,我将页头页脚及其他不需要打印的元素的样式设置如下: <style type="text/css" media="print"> #header,.top_title,#jqprint,#footer,#cssprint h3{display:none} </style> 用jQu

Bootstrap框架的学习教程详解(二)

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 一.下载Bootstrap Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景. 下载地址:http://v3.bootcss.com/getting-started/#download PS:其实我们不用下载bootstrap也可以使用

mybatis分页插件pageHelper详解及简单实例

mybatis分页插件pageHelper详解及简单实例 工作的框架spring springmvc mybatis3 首先使用分页插件必须先引入maven依赖,在pom.xml中添加如下 <!-- 分页助手 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>3.7.5