使用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 相关文章推荐
JavaScript触发器详解
Mar 10 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
node.js域名解析实现方法详解
Nov 05 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
第十一节--重载
2006/11/16 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
php多线程并发实现方法
2016/09/30 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
法国春天百货官网:Printemps.com
2020/06/29 全球购物
客户经理岗位职责
2013/12/08 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
员工培训邀请函
2014/02/02 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
领导干部失职检讨书
2015/05/05 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
Redis高可用集群redis-cluster详解
2022/03/20 Redis
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android