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 CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 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中file_put_contents追加和换行的实现方法
2017/04/01 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
python numpy格式化打印的实例
2018/05/14 Python
python去除文件中重复的行实例
2018/06/29 Python
详解numpy的argmax的具体使用
2019/05/27 Python
深入学习python多线程与GIL
2019/08/26 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python3.7添加dlib模块的方法
2020/07/01 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
周年庆典邀请函范文
2014/01/24 职场文书
股权收购意向书
2014/04/01 职场文书
公司活动总结怎么写
2014/06/25 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
就业意向协议书
2015/01/29 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
法律意见书范文
2015/05/20 职场文书
第一书记观后感
2015/06/08 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS