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 相关文章推荐
JavaScript获取GridView选择的行内容
Apr 14 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
Nov 05 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 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
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
详解python开发环境搭建
2016/12/16 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
销售行业个人求职自荐信
2013/09/25 职场文书
保护环境倡议书范文
2014/05/13 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
辞职信标准格式
2015/02/27 职场文书
高一军训感想
2015/08/07 职场文书
2016国培学习心得体会
2016/01/08 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
一文搞懂MySQL索引页结构
2022/02/28 MySQL