JavaScript+CSS控制打印格式示例介绍


Posted in Javascript onJanuary 07, 2014

1. 用media="print"的css来控制要打印的文件testPrint.html中引用media为print的样式,表示打印时该样式才起作用

<link href="/style/print.css" rel="stylesheet" type="text/css" media="print">

/style/print.css文件
.noprint{display:none;}

在testPrint.html中使用print.css中的样式,在网页浏览的时候是看不出效果的,但是打印的时候会起作用,如下面这一段,加上noprint之后,在浏览器中仍然是现实的,但是打印的时候不显示:
<div class="noprint"> 
<input type="button" onclick="window.print();" value="打印本页" /> 
</div>

当然print.css里面的样式你可以随便写,改颜色啊(彩色的图像在黑白打印机下效果不好,可以用另一种样式打印),字体什么的都可以,随便发挥-----------------------------------------------------------------

2. 用JavaScript来控制

因为这样那样的原因,可能有的人css不太熟练,有的人JavaScript比较牛x,有时候JavaScript也是不错的选择

<script type="text/javascript"> 
<!-- 
//自动在打印之前执行 
window.onbeforeprint = function(){ 
$("#test").hide(); 
} //自动在打印之后执行 
window.onafterprint = function(){ 
$("#test").show(); 
} 
//--> 
</script> 

<div id="test">这段文字不会被打印出来</div>

打印之前,会调用window.onbeforeprint函数,这时你可以随意发挥,用你的聪明才智给html重新构造一边,然后打印。当然打印之后一般还要弄回来,就是window.onafterprint函数了

---------------------------------------------------------------

小技巧:注意一点,打印我们都知道是window.print(),其实也可以打印框架的,如window.top.centerFrame.MainFrame.print();

Javascript 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
Vue中使用vux的配置详解
May 05 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 #Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 #Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 #Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 #Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 #Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 #Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 #Javascript
You might like
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
关于js datetime的那点事
2011/11/15 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
直接在JS里创建JSON数据然后遍历使用
2014/07/25 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
js获取url传值的方法
2015/12/18 Javascript
webpack打包js的方法
2018/03/12 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
Python2和Python3.6环境解决共存问题
2018/11/09 Python
python树莓派红外反射传感器
2019/01/21 Python
Django获取应用下的所有models的例子
2019/08/30 Python
python+pygame实现坦克大战
2019/09/10 Python
python实现智能语音天气预报
2019/12/02 Python
python Tensor和Array对比分析
2020/01/08 Python
园长自我鉴定
2013/10/06 职场文书
小学生家长评语集锦
2014/01/30 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
岳麓书院导游词
2015/02/03 职场文书
银行稽核岗位职责
2015/04/13 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
高三数学教学反思
2016/02/18 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL