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 相关文章推荐
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
万能的php分页类
2017/07/06 PHP
最佳的addEvent事件绑定是怎样诞生的
2011/10/24 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
JavaScript Function函数类型介绍
2015/04/08 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
如何使用angularJs
2017/05/08 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
在Python中表示一个对象的方法
2019/06/25 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
高分子材料个人求职信范文
2013/09/25 职场文书
搞笑获奖感言
2014/01/30 职场文书
初中教师业务学习材料
2014/05/12 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
冰峪沟导游词
2015/02/09 职场文书
大学生实习证明
2015/06/16 职场文书
GO中sync包自由控制并发示例详解
2022/08/05 Golang