JavaScript打印网页指定区域的例子


Posted in Javascript onMay 03, 2014

JavaScript打印页面指定div区域原理:使用window.open()在浏览器打开一个新的页面(window), 使用 window.document.write()将指定div区域的内容写入新窗口文档,document.close()关闭文档,使用window.print()调用打印机打印当前文档。

JavaScript打印函数myPrint(obj):

function myPrint(obj){
    //打开一个新窗口newWindow
    var newWindow=window.open("打印窗口","_blank");
    //要打印的div的内容
    var docStr = obj.innerHTML;
    //打印内容写入newWindow文档
    newWindow.document.write(docStr);
    //关闭文档
    newWindow.document.close();
    //调用打印机
    newWindow.print();
    //关闭newWindow页面
    newWindow.close();
}

myprint()调用方法:

myPrint(document.getElementById('printDivID'));

实例代码:

<script>
function myPrint(obj){
    var newWindow=window.open("打印窗口","_blank");
    var docStr = obj.innerHTML;
    newWindow.document.write(docStr);
    newWindow.document.close();
    newWindow.print();
    newWindow.close();
}
</script>
<div id="print">
<hr />
   打印演示区域,点击打印后会在新窗口加载这里的内容!
<hr />
</div>
<button onclick="myPrint(document.getElementById('print'))">打 印</button>
Javascript 相关文章推荐
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
AngularJs表单验证实例详解
May 30 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
详解微信UnionID作用
May 15 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
js检测输入内容全为空格的方法
May 03 #Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 #Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 #Javascript
js日期联动示例
May 02 #Javascript
jQuery实现的多选框多级联动插件
May 02 #Javascript
自己使用js/jquery写的一个定制对话框控件
May 02 #Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 #Javascript
You might like
一个简单的网页密码登陆php代码
2012/07/17 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
python实现彩色图转换成灰度图
2019/01/15 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
python实现学生信息管理系统源码
2021/02/22 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
写自荐信有哪些不宜?
2013/10/17 职场文书
商务英语求职自荐信范文
2013/12/24 职场文书
教师开学感言
2014/02/14 职场文书
调查研究项目计划书
2014/04/29 职场文书
男方婚前保证书
2015/02/28 职场文书
公历12个月名称的由来
2022/04/12 杂记