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 相关文章推荐
jquery 3D球状导航的文章分类
Jul 06 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
seajs下require书写约定实例分析
May 16 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
使用PHP模拟HTTP认证
2006/10/09 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
php中__toString()方法用法示例
2016/12/07 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
在类Unix系统上开始Python3编程入门
2015/08/20 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
python爬取微信公众号文章的方法
2019/02/26 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
行政前台岗位职责
2013/12/04 职场文书
办公设备采购方案
2014/03/16 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS