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 相关文章推荐
Dom与浏览器兼容性说明
Oct 25 Javascript
js动态创建标签示例代码
Jun 09 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
AJAX学习笔记
May 18 Javascript
一文搞懂redux在react中的初步用法
Jun 09 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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
操作Oracle的php类
2006/10/09 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
php自动加载代码实例详解
2021/02/26 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
python自动化测试实例解析
2014/09/28 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Django实现文件上传下载
2019/10/06 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
项目开发计划书
2014/01/09 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
球队口号
2014/06/18 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
学生会个人总结范文
2015/02/15 职场文书
安全教育主题班会教案
2015/08/12 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers