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 相关文章推荐
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
Dec 25 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
python跳出双层for循环的解决方法
2019/06/24 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
python3中sys.argv的实例用法
2020/04/24 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
高三语文教学反思
2014/01/15 职场文书
2014年元旦感言
2014/03/06 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
合作协议书范本
2014/10/25 职场文书
单独二胎证明
2015/06/24 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
mysql优化
2021/04/06 MySQL
学习nginx基础知识
2021/09/04 Servers