JS 使用 window对象的print方法实现分页打印功能


Posted in Javascript onMay 16, 2018

最近做项目用到了web在线打印功能,经研究使用了JS自身支持的Window对象的打印方法,此种方法兼容性比较好,在IE和火狐浏览器下使用都没有问题。 

1.但是网上好多案例都不支持分页功能,最后通过CSS的page-break-after:always样式解决分页问题,以下代码纯个人编写,有需要的朋友可以直接复制到网页中使用,转载请注明出处,谢谢! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script language="javascript"> 
//打印代码 
 function Print()  
 {  
  var printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head><body >"; 
  var content = ""; 
  var str = document.getElementById('page1').innerHTML;  //获取需要打印的页面元素 ,page1元素设置样式page-break-after:always,意思是从下一行开始分割。 
  content = content + str; 
  str = document.getElementById('page2').innerHTML;  //获取需要打印的页面元素 
  content = content + str; 
  printStr = printStr+content+"</body></html>";            
  var pwin=window.open("Print.htm","print"); //如果是本地测试,需要先新建Print.htm,如果是在域中使用,则不需要 
  pwin.document.write(printStr); 
  pwin.document.close();     //这句很重要,没有就无法实现 
  pwin.print();  
 } 
</script> 
</head> 
<body > 
<div><input type="button" value="打印" onclick="Print()" /></div> 
<div id="page1"> 
  <table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" > 
  <tr><td>第一页打印内容</td></tr> 
  </table> 
</div> 
<div id="page2"> 
  <table width="100%" border="0" cellpadding="0" cellspacing="0" id="content" > 
  <tr><td>第二页打印内容</td></tr> 
  </table> 
</div> 
</body> 
</html>

总结

以上所述是小编给大家介绍的JS 使用 window对象的print方法实现分页打印功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Prototype 学习 工具函数学习($方法)
Jul 12 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
Koa2微信公众号开发之消息管理
May 16 #Javascript
js实现鼠标单击Tab表单切换效果
May 16 #Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 #Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 #Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 #Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 #Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
May 16 #Javascript
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
PHP Mysql编程之高级技巧
2008/08/27 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
读jQuery之五(取DOM元素)
2011/06/20 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
全球在线商店:BerryLook
2019/04/14 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
期末自我鉴定
2014/02/02 职场文书
爱心捐款倡议书
2014/04/14 职场文书
产品委托授权书范本
2014/09/16 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
网络营销实训总结
2015/08/03 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
MySQL 聚合函数排序
2021/07/16 MySQL
php png失真的原因及解决办法
2021/11/17 PHP