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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
openlayers实现地图测距测面
Sep 25 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
2006/10/09 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
php给图片加文字水印
2015/07/31 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
vue实现信息管理系统
2020/05/30 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
一套中级Java程序员笔试题
2015/01/14 面试题
总会计师岗位职责
2014/02/19 职场文书
会计岗位职责范本
2014/03/07 职场文书
法人授权委托书范本
2014/04/04 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
2014年工程部工作总结
2014/11/25 职场文书
当你找不到方向的时候,不妨读读刘备的一生
2019/08/05 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python