window.print打印指定div指定网页指定区域的方法


Posted in Javascript onAugust 04, 2014

第一种方法:指定不打印区域
使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内。
细如下:

<style media=print type="text/css"> 
.noprint{visibility:hidden} 
</style>

要打印的内容。哈哈!

<p class="noprint">将不打印的代码放在这里。</p> 
<a href="javascript:window.print()" rel="external nofollow" target="_self">打印</a>

第二种方法:指定打印区域
把要打印的内容放入一个 span或div,然后通过一个函数打印。

<span id='div1'>把要打印的内容放这里</span> 
<p>所有内容</p> 
<div id="div2">div2的内容</div> 
<a href="javascript:printme()" rel="external nofollow" target="_self">打印</a> 
<script language="javascript"> 
function printme() 
{ document.body.innerHTML=document.getElementByIdx_x_x('div1').innerHTML+'<br/>'+document.getElementByIdx_x_x('div2').innerHTML; 
window.print(); 
} 
</script>

如果要打印的只是整个页面中的一小部分,就最好采用第二种方法。

第三种方法:如果要打印的页面排版和原web页面相差很大,采用此种方法。点打印按钮弹出新窗口,把需要打印的内容显示到新窗口中,在新窗口中调用window.print()方法,然后自动关闭新窗口。
window.print可以打印网页,但有时候我们只希望打印特定控件或内容,怎么办呢?

首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印。

<html> 
<head> 
<script language="javascript"> 
function printdiv(printpage) 
{ 
var headstr = "<html><head><title></title></head><body>"; 
var footstr = "</body>"; 
var newstr = document.all.item(printpage).innerHTML; 
var oldstr = document.body.innerHTML; 
document.body.innerHTML = headstr+newstr+footstr; 
window.print(); 
document.body.innerHTML = oldstr; 
return false; 
} 
</script> 
<title>div print</title> 
</head> 

<body> 
//HTML Page 
//Other content you wouldn't like to print 
<input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print "> 

<div id="div_print"> 

<h1 style="Color:Red">The Div content which you want to print</h1> 

</div> 
//Other content you wouldn't like to print 
//Other content you wouldn't like to print 
</body>
</html>
Javascript 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
jquery.ui.progressbar 中文文档
Nov 26 Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 #Javascript
js实现正方形颜色从下往上升的效果
Aug 04 #Javascript
与Math.pow 相反的函数使用介绍
Aug 04 #Javascript
简单易用的倒计时js代码
Aug 04 #Javascript
javascript中with()方法的语法格式及使用
Aug 04 #Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 #Javascript
checkbox选中与未选中判断示例
Aug 04 #Javascript
You might like
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
浅析PHP绘图技术
2013/07/03 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
js模拟类继承小例子
2010/07/17 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
JQueryEasyUI之DataGrid数据显示
2016/11/23 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
python flask 多对多表查询功能
2017/06/25 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
行政总经理岗位职责
2013/12/05 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
运动会标语
2014/06/21 职场文书
经营目标管理责任书
2014/07/25 职场文书
个人合伙协议书范本
2014/10/14 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
2015年营业员工作总结
2015/04/23 职场文书
放牛班的春天观后感
2015/06/01 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python