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 相关文章推荐
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
js实现京东轮播图效果
Jun 30 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
PHP Stream_*系列函数
2010/08/01 PHP
php实现字符串翻转的方法
2015/03/27 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
offsetParent 算法分析
2010/04/05 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
python操作redis方法总结
2018/06/06 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
员工工作表扬信范文
2014/01/13 职场文书
承诺书模板大全
2015/05/04 职场文书
八月迷情观后感
2015/06/11 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
在js中修改html body的样式
2021/11/11 Javascript