page-break-after:always；解决window.print打印断页问题——已解决_叶浩成520的博客-CSDN博客

安宇雨 - 随手采集
2023-08-15 10:17:24
随手采集
0000-未整理-等待研究

今天用户提出一个关于window.print()打印的问题：
如下图所示：在打印断页的部分，会出现数据打印不全的情况。打印预览与实际打印的情况还有有所区别。
在这里插入图片描述
注意一点：如果想要实现window.print()打印当前的页面，则想要保证打印页面的body的height必须为auto，否则只会打印第一页。还要注意一下权重问题。

@media print{
   body {
       height: auto !important;
   }
}

html部分，之前用的是table，后面由于断页打印不全的问题，我用div写的如上图所示的样式。

<div class="tab">
  <div class="hea">
       <div style="width:40px;">序号</div><div class="big">型号</div><div class="big">品牌</div><div>封装</div><div>单价</div><div>数量</div><div>金额</div>
   </div>
   <div class="tbo">
       <div v-for="(item,index) in dataInfo.materielResultchlids[0].bomDetailEntities" class="lang">
           <div>
               <div style="width:40px;">{{index+1}}</div>
               <div class="big">{{item.PartNo}}</div>
               <div class="big">{{item.Mfg}}</div>
               <div class="nowrap">{{item.Package}}</div>
               <div>{{item.UnitPrice}}</div>
               <div>{{item.BuyNum}}</div>
               <div>{{item.TotalMoney}}</div>
           </div>
       </div>
   </div>
</div>

css部分比较简单，此处不进行展示。

重点是断页问题：
为了能够保证数据量多的情况下，每页的内容都能够展示完全。之前出现打印内容不全都出现在页面的页眉和页脚部分。
因此考虑的解决方法就是：限制每页展示的条数。
比如第一页：第一页表头有其他内容，因此限制第一页只展示前14条：
在这里插入图片描述
第二页及以后，每页展示20条。

如何强制断页呐？？

可以使用css来实现，在需要断页的地方添加一个标签，给此标签添加css如下：

page-break-after:always;表示在此标签之后强制断页。

什么情况下会断页呐？？

需要断页有以下几种情况：

表格条数超过14条，则第一页index==13时，需要断页
表格条数超过14条，并且后续index>13&&(index-13)%20==0时，需要断页

因此在符合上述情况的地方，添加一个强制断页的标签即可。
为了方便，tableLen即为条数-1，也就是索引的最大值。
13&&(index>13&&(index-13)%20==0)" style="page-break-after:always;text-align:center;">


什么情况下需要添加页码？？

为了能够更好的展示数据，可以添加一个页码的功能，可以直接使用window.print()弹窗中的选项来展示：
在这里插入图片描述
但是如果这样的话，页眉和页脚都会展示，而且内容除了页码还有其他。因此我想自己处理这个页码内容。

需要展示页码有以下几种情况：

表格的条数小于14条(也就是tableLen<13)，则应该展示第1页/共1页；
表格的条数超过14条(也就是tableLen>=13)，且(index-13)%20==0并且不是最后一页时，应该展示页码。
最后一页显示页码

上面的情况中，第二种情况会比较难思考，可以跟第三种情况一同处理：
第三种情况：tableLen>13&&index==tableLen：当表格条数超过14条，并且最后一条后面，需要添加页码。
13&&index==tableLen" style="text-align:center;margin-top:6px;">第{{Math.ceil(tableLen/20)}}页/共{{Math.ceil(tableLen/20)}}页
第二种情况可以是在第三种情况的前提下：
13&&index>13&&(index-13)%20==0" style="text-align:center;margin-top:6px;">第{{parseInt((index-13)/20)+1}}页/共{{Math.ceil(tableLen/20)}}页
因为第二种情况与第三种情况有重叠，所以先写第三种情况，当第三种情况不满足时，再判断是否满足第二种情况，即可完成。

如果自己写过js的分页组件，这个应该是很简单了。我的js都忘了，所以花了我很长时间才搞定。。。。

完成！！！

原网址: 访问
创建于: 2023-08-15 10:17:24
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论