使用jquery+CSS实现控制打印样式


Posted in Javascript onDecember 31, 2014

一、添加打印样式

1. 为屏幕显示和打印分别准备一个css文件,如下所示:
  用于屏幕显示的css: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" />
  用于打印的css:<link rel="stylesheet" href="css/printstylesheet.css" media="print" />

2. import方式:
  <style type="text/css">
      @import url("css/printstylesheet.css") print;
  </style>

3. 直接把屏幕显示样式和打印样式写在一个css文件中:
  @media print {}{
    h1 {
      color: black;
    }
    h2 {}{
      color: gray;
    }
  }
  @media print里面的内容只对打印出来的内容有效,之外的内容就是屏幕显示的样式。

其他:
创建一个不指定媒体类型的样式表通常很有用(或者利用media="all")。当你准备好定义一些特别用
于打印的规则时,可以只创建一个单独的样式表,使任何在打印时看起来不好的样式都失效。使用这种方法的一个问题是必须确保打印机样式实际上确实覆盖了主样式表。可以使用!important.

二、打印样式注意事项:

1. 打印样式中不推荐使用背景,因为浏览器默认情况下并不能打印出CSS中的背景内容,只有当浏览器被
  设置可以打印背景的情况下才能打印出背(ie的高级选项中可选)。即使背景可以打印,它也可能盖过叠在它上面的任何文本。
  这是真的,尤其对于用彩色背景在显示器上强烈对比的文本,但是在黑白打印机上打印时会融合这一背景。
  background:none;去掉背景
  图片和颜色。

  可以利用background-color属性设置背景颜色为白色,像这样: font-family: Arial; line-height: 26px;">  使用background的快捷法也可以获得相同的效果:background: white。因此像background: white;
  这样的声明不仅设置了背景颜色为白色,而且消除了所有背景图片。利用这个background的快捷属性,
  你实现了两个目的——设置了一个白色背景,并消除了图片——只用很少的代码。
 
2. 如果需要在打印内容中出现图片,请在HTML代码中加入。

3. 打印设置使用的是物理单位,所以尺寸最好不要用像素(px),可以用pt也可以用cm;

4. 隐藏不需要的或是次要的内容。display:none;

5. 尽量不要让内容浮动,有些浏览器打印浮动的div的过程中,会有一个麻烦,需要特别加以注意。
 不要在打印的样式表中浮动的块,像这样:float: none;。例如,基于Gecko的浏览器
 (例如Netscape 6+),当用户用它来浏览一个打印输出页面时,它会截去浮动元素中的内容。
 这些内容就不会被传送到打印机,下一个页面也不会有它的踪影??它消失了。

6. 尽可能的在HTML代码中做好内容重要的先后次序,这样在打印样式中可以节省不少的麻烦。

7. 打印与网页不一样,打印一定要留下白边,单位用英寸(in)。

8. 要确保页面上的所有文本以黑色打印,就用通配选择器(见第54页)和!important来创建把每个
  标签都格式化为黑色文本的单个样式:
  *{ color: ##000# !important }

9. 在打印中显示链接url的信息:利用一个高级的选择器:after和一个高级的CSS属性称作content,
  把不在屏幕上显示的文本打印在一个样式元素的末端。
  不幸的是,:after选择器和content属性技巧在Internet Explorer 6或者更早的版本上不起作用
  (到编写本书为止,在IE 7上也不行)。但是它在Firefox和Safari上的确可以,因此你至少可以清楚
  地说明URL以便访问者可以使用他们的浏览器。

  为了做到这点,给打印样式表添加一个样式,在每个链接后面打印出URL。你甚至可以添加其他文本项
  目比如圆括号,使它更好看些:
  a:after {content: " (" attr(href) ") ";}

  然而,这个CSS不区分外部或者内部的链接,因此它也打印出到达同一个网站其他页面的没用的相对
  文档链接:“访问主页(../../index. html)。”利用一点点CSS 3魔法,就可以强制这个样式只打
  印绝对的URL(即以http://开头的那些),像这样:
  a[href^="http://"]:after {content: " (" attr(href) ") ";}

10.给打印添加分页符:两种被广泛认可的属性是page-break-before和page-break-after。
  page-break-before告诉网页浏览器在一个指定样式之前插入一个分页符。利用page-break-before
  属性使图片打印在一张新页面上,并且适合整张页面。
  要使一个元素作为打印页上的最后一个项目显示,就给那个元素的样式添加page-break-after: always。

  创建两个类样式,以类似于.break_after和.break_before的名字来命名,像这样:
  .break_before { page-break-before: always; }
  .break_after { page-break-after: always; }

  然后你可以选择性地把这些样式应用给应该打印在网页顶部或者底部的元素。

三、测试打印样式

通常来说我们不可能用打印机来进行测试,在IE浏览器菜单栏“文件”中有“打印预览”,可以通过这
打印预览来做测试。

Javascript 相关文章推荐
jquery ajax执行后台方法
Mar 18 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
js实现进度条的方法
Feb 13 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 #Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 #Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 #Javascript
JavaScript中的值类型转换介绍
Dec 31 #Javascript
javascript实现滑动解锁功能
Dec 31 #Javascript
JavaScript中number转换成string介绍
Dec 31 #Javascript
JavaScript中string转换成number介绍
Dec 31 #Javascript
You might like
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
python3.7添加dlib模块的方法
2020/07/01 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
体育教师工作总结的自我评价
2013/10/10 职场文书
介绍信的写法
2015/01/31 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python