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 相关文章推荐
js 字符串转化成数字的代码
Jun 29 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
JS delegate与live浅析
Dec 21 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
微信小程序三级联动选择器使用方法
May 19 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 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 array的学习笔记
2012/05/10 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
浅谈开发eslint规则
2018/10/01 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
Vue实现图书管理小案例
2020/12/03 Vue.js
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
Python subprocess模块详细解读
2018/01/29 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Python hashlib模块用法实例分析
2018/06/12 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
django 模型中的计算字段实例
2020/05/19 Python
python用什么编辑器进行项目开发
2020/06/17 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
学习演讲稿范文
2014/05/10 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
计划生育个人总结
2015/03/02 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书