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 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
前端jquery部分很精彩
May 03 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
微信小程序canvas实现签名功能
Jan 19 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面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
js验证表单第二部分
2006/11/25 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
python数据爬下来保存的位置
2020/02/17 Python
实例代码讲解Python 线程池
2020/08/24 Python
python 基于wx实现音乐播放
2020/11/24 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
行政文员实习自我鉴定范文
2014/09/14 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
入学证明
2015/06/23 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
Windows7下FTP搭建图文教程
2022/08/05 Servers