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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
node内置调试方法总结
Feb 22 Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
vue 页面跳转的实现方式
Jan 12 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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
浅谈vue路径优化之resolve
2017/10/13 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
2019/05/10 jQuery
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
多个应用共存的Django配置方法
2018/05/30 Python
python在不同条件下的输入与输出
2020/02/13 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
印尼购物网站:iLOTTE
2019/10/16 全球购物
蟋蟀的住宅教学反思
2014/04/26 职场文书
体育个人工作总结
2015/02/09 职场文书
六年级作文之关于梦
2019/10/22 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS