window.print()页面打印之表格内容分页填充进行分页打印
2024-06-08 02:47:56
windwow.print()用于打印当前窗口的内容，很简便，可当内容特殊并且打印有特殊需求的时候就要绕个圈了。下面是需要打印的表格：
当数据量少的时候像上面的表格一样，中间的内容只有5条数据，打印出来在纸上会有空白，不太好。中间内容是不确定的可能几十条，可能上百条，这样循环在界面上展示是没有问题的，但是当使用火狐打印时会按照表格的大小成倍的缩小，最后打印到一张纸上，字体和表格都会很小，当使用其他浏览器时它会自动将内容打印到下一张纸上，因为打印到纸上不可能没有边距，所以在纸与纸衔接的时候会存在数据丢失打印不出来的情况。
经过测试，当每页17条数据的时候打印出来可以满页填充，既不会所以为了使打印出来的表格更靠谱，更为用户着想一些，在界面显示的时候显示的条目为实际的条目，打印时如果数据量少就进行自动空白填充，如果数据量大在保留标题、表格上半部分和下半部分的同时进行分页填充打印，打印完成后再恢复原来的页面。
实现思路：
1.使用打印分页css，相当于分页符，总是在此div后分页
<div style="page-break-after:always"></div>ps:关于page-break-after的使用：http://www.w3school.com.cn/cssref/pr_print_page-break-after.asp 需要特别注意的是它应用于：position 值为 relative 或 static 的非浮动块级元素。当时absolute的时候是不起作用的。
2.将界面分为两个div,一个div中用于进行界面展示，另一个div进行打印填充，两个div
一个为界面展示时的样式，另一个为打印时的样式，单击打印时页面div隐藏，对另外一个div进行填充，打印方法执行完成后，页面div显示，另一个div隐藏。
3.将页面div分为几部分：
第一部分为标题内容部分，第二部分为表格上半部分是固定的，第三部分为数据部分，每页的内容是不同的， 第四部分为表格下半部分，最后为表格下面的内容部分是固定的。
页面展示div代码展示：
<div id="dataPrint" style="height:100%; margin-left:13px;margin-right:15px;display:none;"></div><div id="dataPanel" style="position:absolute;left:50%;margin-left:-397px;"><div id="topContent"><h2 style="width:794px;text-align:center">********资料凭单</h2><br><br><span style="margin-left:34px;">${currentDate}</span><span style="margin-left:510px;">NO:</span></div><table id="table" class="table table-bordered table-condensed table-hover" style="width:730px;margin-left:30px;border-width:4px;margin-top:5px;"><tbody id="firstContent"><tr><td style="width: 10%;border-left-width:5px;text-align:center">姓 名</td><td colspan='2'><input style="width: 100%;border-width:0" id="applicantName" value="${applicationInfo.applicant.name}"/></td><td style="width: 20%;text-align:center">电 话</td><td style="width: 20%"><input style="width: 100%;border-width:0" id="Phone" value="${applicationInfo.applicant.mobile}"/></td></tr><tr><td style="word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center">单 位</td><td colspan='2'><input style="width: 100%;border-width:0" id="WorkUnit" value="${applicationInfo.applicant.work_unit}"/></td><td style="width: 19%;text-align:center">类 别</td><td style="width: 19%;text-align:left">社内<input type="checkbox" style="margin-left:0" /> 军内<input type="checkbox" style="margin-left:0"/> 地方<input type="checkbox" style="margin-left:0" /></td></tr><tr><td style="word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center">内 容</td><td colspan='4'><input style="width: 100%;border-width:0" id="Content" value=""/></td></tr><tr><td style="word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center">用 途</td><td colspan='2'><input style="width: 100%;border-width:0" id="Content" value=""/></td><td style="width: 20%;text-align:center">类 别</td><td style="width: 20%;text-align:left">新闻<input type="checkbox" style="margin-left:0" /> 宣传<input type="checkbox" style="margin-left:0" /> 商业<input type="checkbox" style="margin-left:0" /></td></tr><tr><td style="word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center">序 号</td><td style="width: 20%;text-align:center">底片号/画报号</td><td style="width: 20%;text-align:center">年 代</td><td style="width: 20%;text-align:center">尺 寸</td><td style="width: 20%;text-align:center">价 格</td></tr></tbody><tbody id="secondContent"><!-- 循环开始 --><c:if test="${applicationInfo.resType eq 'Picture'}"><c:forEach items="${applicationInfo.dataInfo}" var="item" varStatus="varStatus"><tr id="tr_${varStatus.index}"><!--pictorialInfo --><td style="word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center">${varStatus.index+1}</td><td style="width: 20%;text-align:center"><input style="width: 100%;border-width:0" value="<fmt:formatDate value="${item.pictureInfo.negativeNo}" pattern="yyyy"/>"/></td><td style="width: 20%;text-align:center"><fmt:formatDate value="${item.pictureInfo.shootDt}" pattern="yyyy" /></td><td style="width: 20%;text-align:center">${item.pictureInfo.width}*${item.pictureInfo.height}</td><td style="width: 20%;text-align:center"></td></tr></c:forEach></c:if><c:if test="${applicationInfo.resType eq 'PictureBook'}"><c:forEach items="${applicationInfo.dataInfo}" var="item" varStatus="varStatus"><tr id="tr_${varStatus.index}"><!-- pictureBookInfo --><td style="word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center">${varStatus.index+1}</td><td style="text-align:center"><input style="width: 100%;border-width:0" value=""/></td><td style="text-align:center"></td><td style="text-align:center"></td><td style="text-align:center"></td></tr></c:forEach> </c:if><c:if test="${applicationInfo.resType eq 'Pictorial'}"><c:forEach items="${applicationInfo.dataInfo}" var="item" varStatus="varStatus"><tr id="tr_${varStatus.index}"><!-- pictorialInfo --><td style="word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center">${varStatus.index+1}</td><td style="text-align:center"><input style="width: 100%;border-width:0" value="${item.pictorialInfo.issueNo}"/></td><td style="text-align:center"><fmt:formatDate value="${item.pictorialInfo.aId}" pattern="yyyy" /></td><td style="text-align:center"></td><td style="text-align:center"></td></tr></c:forEach></c:if> </tbody><tbody id="thirdContent"><tr><td style="word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center">总 计</td><td colspan='4'></td></tr><tr><td style="word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center">实 收</td><td colspan='4'><span style="margin-left:33%"></span>大 写:</td></tr><tr><td style="word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center">组 长<br>意 见</td><td colspan='4'></td></tr><tr><td style="word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center">分管副主任<br>意 见</td><td colspan='4'></td></tr><tr><td style="word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center">主 任<br>意 见</td><td colspan='4'></td></tr><tr><td style="word-wrap:break-word;border-left-width:5px;" colspan='5'><span style="margin-left:13px"></span>接 待:<span style="margin-left:200px"></span>制 作:<span style="margin-left:200px"></span>收 银:</td></tr></tbody></table><div id="footerContent"><span style="margin-left:33px;margin-top:-5px">地 址：北京市阜外大街34号<span style="margin-left:5px"></span>***********<span style="margin-left:51px"></span>电 话：***********<span style="margin-left:50px"></span>军 线：***********</span></div></div>打印js拼接布局代码展示：
function doPrint() {//隐藏按钮，避免按钮被打印出来$("#btnPre").hide();$("#btnNext").hide();$("#btnon").hide();$("#btnBack").hide();$("#btnPreView").hide();var html_bak = document.getElementById("dataPanel").innerHTML;preparePrintTable();window.print();document.getElementById("dataPanel").innerHTML = html_bak;$("#dataPanel").show();$("#dataPrint").html();$("#dataPrint").hide(); $("#btnPre").show();$("#btnNext").show();$("#btnon").show();$("#btnBack").show();$("#btnPreView").show();} function preparePrintTable() {//隐藏原表格$("#dataPanel").hide();var pageItemNum = 17; //满页数var pages=parseInt('${applicationInfo.dataInfo.size()}' / pageItemNum);$("#dataPrint").html();var newTableDiv;var html_tbl;html_tbl = "";var head_comp;var head_table_comp;var tail_table_comp;var tail_comp;var newTable;//获取原table的class和style属性var tbl_cls = $("#table").attr("class");var tbl_sty = $("#table").attr("style");head_comp = document.getElementById("topContent").outerHTML;tail_comp = document.getElementById("footerContent").outerHTML;head_table_comp = document.getElementById("firstContent").outerHTML;tail_table_comp = document.getElementById("thirdContent").outerHTML;for(i=0; i < pages ; i++){ //last page will be handled in the way;//创建新的tablenewTable = document.createElement("table");newTable.setAttribute('class',tbl_cls);newTable.setAttribute('style',tbl_sty);//添加中间数据部分var newTableTrs="";for(j=i*pageItemNum; j < (i+1)*pageItemNum; j++){if(document.getElementById("tr_" + j) == null) {break;}newTableTrs += document.getElementById("tr_" + j).outerHTML;console.log("newTableTrs="+newTableTrs);}//添加表格内容newTable.innerHTML=head_table_comp+newTableTrs+tail_table_comp;//表格内容部分divnewTableDiv = document.createElement("div");newTableDiv.innerHTML=head_comp+newTable.outerHTML+tail_comp;//换行符sep = document.createElement("div");sep.setAttribute("style","page-break-after:always");//添加换行符调节第二页标题位置var br = document.createElement("br");var newDiv=newTableDiv.outerHTML+sep.outerHTML+br.outerHTML;html_tbl += newDiv;}//prepare last page;var leftItemNum = parseInt('${applicationInfo.dataInfo.size()}' % pageItemNum);if(leftItemNum > 0) {newTable = document.createElement("table");newTable.setAttribute('class',tbl_cls);newTable.setAttribute('style',tbl_sty);//添加中间数据部分var newTableTr="";var newTableEmtTrs="";for(j=pages * pageItemNum; j < ${applicationInfo.dataInfo.size()}; j++){if(document.getElementById("tr_" + j) == null) {break;}newTableTr += document.getElementById("tr_" + j).outerHTML;;}var emptyTr;var emptyTd;for(k=0; k < pageItemNum - leftItemNum; k++){newTableEmtTrs +=createEmptyTr(j + k);}console.log("newTableEmtTrs="+newTableEmtTrs);var tbody_comp = createEmptyTr(pageItemNum - leftItemNum);newTable.innerHTML=head_table_comp+newTableTr+newTableEmtTrs+tail_table_comp;newTableDiv = document.createElement("div"); newTableDiv.innerHTML=head_comp+newTable.outerHTML+tail_comp;html_tbl += newTableDiv.outerHTML;}document.getElementById("dataPrint").innerHTML = html_tbl;$("#dataPrint").show();}function createEmptyTr(idx) {var emptyTr;var emptyTd;emptyTr = document.createElement("tr");emptyTr.setAttribute("style","word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center");emptyTd = document.createElement("td");emptyTd.setAttribute("style","word-wrap:break-word;width: 10%;border-left-width:5px;text-align:center");emptyTd.innerHTML=" ";var tra= emptyTd.outerHTML;emptyTd = document.createElement("td");emptyTd.setAttribute("style","text-align:center");var trb= emptyTd.outerHTML;emptyTd = document.createElement("td");emptyTd.setAttribute("style","text-align:center");var trc= emptyTd.outerHTML;emptyTd = document.createElement("td");emptyTd.setAttribute("style","text-align:center");var trd= emptyTd.outerHTML;emptyTd = document.createElement("td");emptyTd.setAttribute("style","text-align:center");var tre= emptyTd.outerHTML;emptyTr.innerHTML=tra+trb+trc+trd+tre;return emptyTr.outerHTML;}ps:之所以使用innerHTML和outerHTML是因为使用IE或者360浏览器时append方法不兼容报错，不然拼接内容时直接append就可以了，像
head_table_comp = document.getElementById("firstContent");
newTable.append(head_table_comp);
这样就可以，如果对浏览器要求不高的话使用append的方式比较好。
去掉web打印时自带的页眉页脚以及url：
<style media="print">@page {size: auto; /* auto is the initial value */margin: 0mm; /* this affects the margin in the printer settings */}
</style>最后效果图：
小结：
进行分页打印的时候也是走一步一个坑，开始分页div添加进去了，但是并没有分页，火狐自动缩小，解决了火狐的问题，发现IE和360js代码不兼容，前台经常会因为种种需求拼接界面，在这个过程中锻炼了自己逻辑思维和前台代码拼接的能力，写此博客作为自己项目成长的印记以及分享。
window.print()页面打印之表格内容分页填充进行分页打印相关推荐
- js打印html表格内容,js实现简单的打印表格
本文实例为大家分享了js实现打印表格的具体代码,供大家参考,具体内容如下 效果如下: 代码如下: 打印表格 var data=[ {id:1001,icon:"img/1.png" ...
- excel打印预览在哪里_别再浪费A4纸了，Excel按下这个键，一张纸可以打印全部表格内容...
我们在工作和生活中,经常需要打印Excel表格,可是有时表格太宽了,无法打印在一张A4纸上,今天就来教大家几种方法,只需按下一个键,就可以打印全部表格内容. 一.表格打印一页 1.设置分页 首先点击[ ...
- html表格打印填充分页,window.print()页面打印之表格内容分页填充进行分页打印
windwow.print()用于打印当前窗口的内容,很简便,可当内容特殊并且打印有特殊需求的时候就要绕个圈了.下面是需要打印的表格: 当数据量少的时候像上面的表格一样,中间的内容只有5条数据,打印出 ...
- Excel表格在编辑状态时文字完整显示，但是预览和打印时表格内容显示不全问题，如何解决
首先说明,目前还没找到完善的解决方案,可以通过以下方式暂时处理(虽然达不到预期效果o(╥﹏╥)o),欢迎大家评论区讨论完善. 复现场景: 1.在Excel中针对以下表格已经设置过自动调整行高,且编辑状 ...
- window.print()实现打印指定内容——功能实现
最近在做后台管理系统时,需要实现一个打印功能,打印的内容为页面上指定的dom.此时可以通过window.print()功能来实现: html部分 <button @@click="pr ...
- Vue2.js：前端在浏览器中网页表格打印的实现方案：window.print、print-js、iframe
目录 需求描述 方案1:直接打印页面 方案2:使用css媒体查询控制打印内容 方案3:第三方插件print-js 方案4:将要打印的节点内容写入iframe 方案5:将要打印的html写入iframe ...
- window.print 打印页面指定区域
这一阵子由于项目需要,需要在项目某页面下加一个打印的功能,在网上查过之后,知道了window.print 这个函数,这个函数可以很方便的打印当前窗口中的内容, 但是这个有时候并不能满足广大用户的需求: ...
- window.print() 前端实现网页打印详解
前言 print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍. 一.print()方法 print() 方法用于打印当前窗口的内容.调用 prin ...
- html打印指定区域内容,js print打印网页指定区域内容
比较简单的办法 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 细如下: 代码如下 .noprint{visibility:hidden} 要打印的内容.哈哈! ...
最新文章
- 学习String的内容
- linux history nginx,vue-router History 本地开发环境和nginx配置
- js中的showModalDialog的实战应用
- convirt2.5在虚拟机上安装笔记
- 【转载】C#中List集合使用Contains方法判断是否包含某个对象
- android判断参数非空,Android Studio注释模板Live Templates参数获取不到为null的一些
- wxpython有哪些基本功能_用Python中的wxPython实现最基本的浏览器功能
- c++ static修饰符浅析
- python的argparse模块
- Android用户界面设计：基本按钮
- Java学习（10） —— 常用类
- excel公式编辑器_数据分析Excel必备技能：数据
- 如何提高思维能力和逻辑能力？
- 手把手教你使用R语言做出SCI论文中的表二（单因素分析表）（1）
- 软件登录软件 DIY
- 华为服务器销售怎么样,云服务器销售好做吗
- Leetcode: Longest Valid Parentheses
- SVN管理文件的步骤
- C语言-03-基本数据类型及输入输出函数
- wps加载失败模板文件损坏_WPS文件因操作不当被损坏怎么办？