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的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
jquery 表单进行客户端验证demo
Aug 24 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
js单词形式的运算符
May 06 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
js实现时间日期校验
May 26 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根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
Python实现控制台输入密码的方法
2015/05/29 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
基于Python实现用户管理系统
2019/02/26 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
详解python中各种文件打开模式
2020/01/19 Python
《老王》教学反思
2014/02/23 职场文书
消防安全员岗位职责
2014/03/10 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
辞职信如何写
2015/02/27 职场文书
稽核岗位职责范本
2015/04/13 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
催款律师函范文
2015/05/27 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技