js 页面打印，兼容单个打印和分页批量打印，自定义页眉和简单页脚

场景：

最近在公司做开发，有个需求需要页面打印功能，作为前端半桶水都不到，只会改页面的我，一脸懵逼，公司里也没人系统的做过，按照惯例，本着有事找度娘的心态(我一直认为我们现在遇到的70%-80%的问题，肯定前人有遇到过)，上百度搜索一圈，发现还是有大量的帖子，但很多都是重复的，且并不十分符合我当前的需求，但通过查阅大佬们的帖子，我对js打印的处理方向有个大致的了解。话不多说，开始进入正题，记录下我本次的 js 打印页面开发。

需求：

1.单个指定订单打印

2.多个订单批量打印

3. 页眉页脚设置(页眉设置完成，页脚半成品)

需求寥寥数语，很简单，没什么可汲取的有效信息，再加一份Word打印的效果模板，开始干活，整个开发期间，我改了好几版，为了节约大家的时间，先前的几个被我推翻的历史版本就不再阐述，本文仅记录我的最终提交的版本。

开发记录：

当前打印版本思路是使用页面放置一个 隐藏的iframe 的方式，实现打印内容动态加载，而不影响我页面的其他功能。

将打印页面单独写好(页面样式和打印样式会有不同)，我当前项目前端采用的是 thymeleaf 模板，后端 SpringBoot ，在打印页面中，为保证打开打印时，需要打印的数据能完整展示，不使用js ajax 动态加载，直接使用 thymeleaf 模板语言进行页面加载赋值，后端转发请求页面时，把值处理好，设置在model 中，前端直接取值使用。

自定义页眉页脚：

css样式：

/** 隐藏系统默认的页眉页脚 **/   @page {size: auto;  /* auto is the initial value */margin: 0mm; /* this affects the margin in the printer settings */}/** 设置默认的页眉页脚默认为隐藏 **/
.beforeHeader,
.afterFooter {display: none;
}@media print {/* 打印时显示 */.beforeHeader, .afterFooter {display: block;}
}

页面：

通过我本人的多次测试，页面距离最外层打印区域差不多 20-25px就可以了。

批量打印只需要传入多个id查询对应的数据，返回的结果为list ,这样在前端页面上就可以采用 thymeleaf 的循环方法进行动态生成打印内容，兼容单个打印和批量打印。

批量打印是就涉及到分页问题，对于js 调用打印机，只需要在我们的单个打印内容的最外层加上样式：page-break-after:always; 即可，这样打印机就会打印完我们单个打印内容后，不管当前纸张是否已经填满，都会换一张纸重新打印。

讲完了页面构造和赋值，现在讲下js的操作，js 的操作及其简单：

在触发打印事件方法中，加上动态更新我们iframe的src页面路径，从而时当前iframe的页面内容都是最新的。

$("#printIframe").prop("src", u.formatWebUrl("页面路径?ids=" + ids));

printIframe 为先前页面上放置的隐藏iframe的id，单单加上这个还不够，为保证触发浏览器打印时，页面数据都是加载完成的，我们还需要监听 iframe的加载完成事件，等页面数据加载完了以后再触发打印事件。

            //监听iframe加载完成后，触发打印事件var iframe = document.getElementById("printIframe");if (iframe.attachEvent) {iframe.attachEvent("onload", function() {document.getElementById('printIframe').contentWindow.print();});} else {iframe.onload = function() {document.getElementById('printIframe').contentWindow.print();};}

printIframe 为先前页面上放置的隐藏iframe的id。

至此，一个采用 iframe 触发浏览器打印功能开发完成，当前例子，会打开打印的预览页面，和打印机设置页面(如下图)，但不会打开我们自己写的页面，连接上打印机，点击页面上的打印按钮就可以实现打印了。

总结：

和往常的开发过程一样，还没做时感觉好难，中间会几经坎坷，但做完后回头看，却感觉并没有什么难点，感觉都很简单。

本次 js 打印页面的开发，没中不足的就是页脚的设置，和开头时说的一样，只成功了一半，可以自定义，但是没办法做成页码，一个页面一张纸的，比如 1,2,3 没问题，可以通过获取当前的循环次数来设置页数，但一个页面多张纸的，比如：1-1,1-2,2-1,2-2,2-3暂时就不知道怎么做了，如果大佬们针对这个有好的解决办法，欢迎留言。

最后，在这里默默的感谢网上各位大佬给的开发思路：

web使用window.print()实现分页批量打印：https://blog.csdn.net/weixin_41488294/article/details/81705171

设置页面页脚：https://segmentfault.com/q/1010000006138115

js 页面打印，兼容单个打印和分页批量打印，自定义页眉和简单页脚相关推荐

怎么批量打印CAD文件？CAD文件批量打印教程
怎么批量打印CAD文件?经常使用CAD文件应该知道,我们在使用CAD文件之后,常常需要将编辑好的CAD文件打印出来,为了方便操作,我们通常会使用批量打印.那么我们应该怎么进行批量打印操作?怎么批量打印 ...
vue打印兼容xp32位系统/vue的打印功能
文章目录一.vue-print-nb 二.vuePlugs_printjs 一.vue-print-nb 这个插件很好用,也很简单,但是问题就是不兼容xp32位. 官方安装及使用文档 1.安装 np ...
html 多个分页连续打印机,web使用window.print()实现分页批量打印。
写了有关于web客户端打印物料条码的功能.想着以后可能会用到,就把他给写下来了. 主要参考了:https://blog.csdn.net/ww130929/article/details/719771 ...
web使用window.print()实现分页批量打印。
写了有关于web客户端打印物料条码的功能.想着以后可能会用到,就把他给写下来了. 主要参考了:https://blog.csdn.net/ww130929/article/details/719771 ...
.net实现批量在线打印_如何实现报表的批量打印需求
在 web 报表应用中,经常会遇到批量打印的需求,即点击一次打印按钮,实现多张报表的打印输出.润乾报表提供了两种不同的打印方式(applet 打印.PDF 打印)实现批量打印需求,同时也支持横纵报表打 ...
用Labelmx条码打印软件在A4纸上批量打印条码标签
直接打印在A4纸上的多排条码标签与在多排标签纸上打印是不同的.前者使用的是普通打印机,后者使用的是标签打印机.但是在Label mx通用条码标签设计系统中,单个标签的设计是相同的.只是打印设置中有区别 ...
用标签打印软件在A4纸上批量打印条码标签
A4纸上直接打印的多排条码标签需要使用的是普通打印机,无论是几排的标签,在Label mx通用条码标签设计系统中,都只需要设计好一个标签内容,软件可以通过设计流水号属性或者连接数据库等方式进行多排的批 ...
java 批量打印_用java怎样实现批量打印
展开全部下面是实现Java批量打印功能的具体工具类,其中的Info类和UserClass为具体的快递面单中要打印的信息e68a8462616964757a686964616f313333633839 ...
条码打印软件如何使用Excel表批量打印条码标签
由于时代的发展,现在的印刷行业中批量生成可变数据标签并批量打印已经成为一项非常重要的工作.同时在条码打印软件中,使用数据库导入批量生成可变数据标签并批量打印也是专业的条码打印软件中的基础功能.本文我们 ...

js 页面打印，兼容单个打印和分页批量打印，自定义页眉和简单页脚

js 页面打印，兼容单个打印和分页批量打印，自定义页眉和简单页脚相关推荐

最新文章

热门文章