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 parseInt与Number函数的区别
Jan 21 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
jQuery操作之效果详解
May 19 jQuery
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
微信小程序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常用ODBC函数集(详细)
2013/06/24 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
个人年终总结开头
2015/03/06 职场文书
婚礼家长致辞
2015/07/27 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python