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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
js 获取经纬度的实现方法
Jun 20 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
Javascript继承机制详解
2017/05/30 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
python3中int(整型)的使用教程
2017/03/23 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
工作表现评语
2014/01/19 职场文书
五年级数学教学反思
2014/02/11 职场文书
成龙洗发水广告词
2014/03/14 职场文书
分公司任命书
2014/06/06 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
写给女朋友的保证书
2015/05/09 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android