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 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
js实现简单的验证码
Dec 25 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 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横向重复区域显示二法
2008/09/25 PHP
php生成curl命令行的方法
2015/12/14 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
python目录与文件名操作例子
2016/08/28 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
python中的itertools的使用详解
2020/01/13 Python
轻松制作精彩视频:Animoto
2018/09/19 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
会话Bean的种类
2013/11/07 面试题
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
党员党性分析材料
2014/02/17 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
基层党支部整改方案
2014/10/25 职场文书
地陪导游欢迎词
2015/01/26 职场文书
逃课检讨书
2015/01/26 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
护士工作心得体会
2016/01/25 职场文书
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers