web页面的单页打印以及批量打印实现方法

打印事件:window.print()

1.单页打印(布局打印):

function printCnt(){

//1.获取当前页的html代码

var body = window.document.body.innerHTML;

//2.要打印的部分(#print里面的内容就是要打印的内容)

window.document.body.innerHTML =document.getElementById(“print”).innerHTML;

window.print();

window.document.body.innerHTML = body;

//重新载入当前文档:

location.reload();

}

注意:location.reload();要加,因可解决JS window.print()第二次点击事件失效问题

2.批量打印

注意点:

(1).控制网页的分页:page-break-after:always

注意:避免在表格、浮动元素、带有边框的块元素中使用分页属性

(2).给每个分页的内容要加一个高度,防止变样

 

 

 

报告单1

 

 

报告单2

 

 

 

(3).如果使用window.open(“showPrint.html”,”print”); 打印预览页面的话

//如果是本地测试,需要先新建Print.html,如果是在域中使用,则不需要

// res 是后端返回的需要打印的xxx.html页面

var pwin=window.open(res,”print”);

pwin.document.write(res);

pwin.document.close();//这个是必须的

注意:pwin.document.close(); 可以关闭showPrint.html的页面,使其第二次打印的时候不会跳转到showPrint.html

文章来源:田珊珊个人博客

来源地址:http://www.tianshan277.com/757.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:SEO优化专员,转转请注明出处:https://www.chuangxiangniao.com/p/899697.html

(0)
上一篇 2025年1月4日 01:41:19
下一篇 2025年1月4日 01:42:07

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • WEB前端工程师利用业余时间制作网站主题模板兼职赚钱

    前几天闲暇无聊的时候刷头条视频看到有一个WEB前端工程师由于身体原因辞职,目前在待业阶段帮助朋友进行讲师培训工作,看到实际的介绍收益还是比较多的。对于我们很多有技术的前端、后端开发的来说,其实不缺少赚钱的机会,只是我们是否有看到赚钱的方式。…

    网站运营 2025年1月4日
    100
  • 隐藏 Web 中的元素方法及优缺点教程详解

    这篇文章主要介绍了隐藏 Web 中的元素方法及优缺点教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 事例源码: https://codepen.io/shadeed/pen/03c…

    2025年1月4日 编程技术
    100
  • web网站安全防护解决办法大全

    Web的安全防护早已讲过一些专业知识了,下边再次说一下网站安全防护中的登陆密码传输、比较敏感实际操作二次验证、手机客户端强认证、验证的不正确信息、避免暴力破解密码、系统日志与监控等。 一、登陆密码传输 登陆页面及全部后端必须验证的网页,页面…

    建站经验 2025年1月4日
    100
  • 详解html-webpack-plugin使用

    这篇文章主要介绍了html-webpack-plugin使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 最近在react项目中初次用到了html-webapck-plugin插件,用到该插件的…

    编程技术 2025年1月4日
    100
  • 日志分析软件Weblogexpert怎么用

    Weblogexpert是一个快速且功能强大的访问日志分析工具。这样你就可以知道你网站的访问者:活动统计数据,文件访问路径,信息指向网页,搜索引擎,浏览器,操作系统等。由这一计划产生的易读报告,包括文字资料(表格)和图表。 由于是运行在 w…

    2025年1月4日 网站运营
    200
  • 十条服务器端优化Web性能的技巧总结

    提高 web 应用的性能从来没有比现在更重要过。网络经济的比重一直在增长;全球经济超过 5% 的价值是在因特网上产生的(数据参见下面的资料)。这个时刻在线的超连接世界意味着用户对其的期望值也处于历史上的最高点。如果你的网站不能及时的响应,或…

    搜索优化 2025年1月4日
    200
  • 浅谈移动端以纯文本阅读为主的Web设计要点

    1 确定体验评估指标 1.1 移动阅读及其组成要素 移动阅读是指利用手机、平板电脑、电子阅读器等移动终端进行的所有阅读行为,包含通过浏览器浏览网页以及书城客户端、新闻客户端、资讯客户端、杂志客户端、微博、公众号文章等阅读途径,浏览小说、报纸…

    2025年1月3日 建站经验
    200
  • WEB标准之内容结构表现和行为到底怎么分离

    内容与表现分离,从标准到国人重视那天起,就已经讨论了,但是停留在div+css xhtml+css 纯代码的分离,思想上流程上,到底如何分离? 古老的话题:一首古诗的分离 1.给你一首古诗,保存为毫无格式的一堆文字,你去理解它的内容,进行结…

    建站经验 2025年1月3日
    200
  • Web开发中最致命的8个小错误

    现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性。本文收集了一些在Web开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助Web开发者更好的完善网站。 通过避免下面这些小错误,可以使得我们的网站变得更为友好。 错误…

    2025年1月3日 建站经验
    200
  • 如何为你的网站挑选适宜的Web开发框架?

    古语云工欲善其事,必先利其器,对于工程师而言,选择一款合适而强大的开发框架对开发工作是大有裨益的。那么我们该从什么角度来进行衡量和挑选呢? 首先对于一家创业公司而言,这更像是一个商业抉择而不仅仅是技术选择,时间人力物力等开销都必须要考虑周全…

    建站经验 2025年1月3日
    200

发表回复

登录后才能评论

联系我们

156-6553-5169

在线咨询: QQ交谈

邮件:253000106@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

联系微信