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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 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 parse_url 一个好用的函数
2009/10/03 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
2016/05/05 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
python树的同构学习笔记
2019/09/14 Python
python set集合使用方法解析
2019/11/05 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
Python类的继承super相关原理解析
2020/10/22 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
医院院务公开实施方案
2014/05/03 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
优秀志愿者感言
2015/08/01 职场文书
体育委员竞选稿
2015/11/21 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang