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 相关文章推荐
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
组合算法的PHP解答方法
2012/02/04 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
Javascript复制实例详解
2016/01/28 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python分析nignx访问日志脚本分享
2015/02/26 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
医院门卫岗位职责
2013/12/30 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
党员承诺书内容
2014/03/26 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
儿园租房协议书范本
2014/12/02 职场文书
2015年营业员工作总结
2015/04/23 职场文书
招商银行工作证明
2015/06/17 职场文书