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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
javascript显示动态时间的方法汇总
Jul 06 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
python实现的简单猜数字游戏
2015/04/04 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python实现音乐下载的统计
2018/06/20 Python
基于python实现简单日历
2018/07/28 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
初中高效课堂实施方案
2014/02/26 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
装修施工安全责任书
2014/07/24 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
加强作风建设工作总结
2014/10/23 职场文书
质量保证书怎么写
2015/02/27 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
Python基于百度AI实现抓取表情包
2021/06/27 Python