今天用户提出一个关于window.print()打印的问题：

如下图所示：在打印断页的部分，会出现数据打印不全的情况。打印预览与实际打印的情况还有有所区别。

LuaViewSDK print 打印不显示 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条：

LuaViewSDK print 打印不显示 window.print打印预览不全_Math_02


第二页及以后，每页展示20条。

如何强制断页呐？？

可以使用css来实现，在需要断页的地方添加一个标签，给此标签添加css如下：
<p style="page-break-after:always;"></p>page-break-after:always;表示在此标签之后强制断页。

什么情况下会断页呐？？

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

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

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

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

为了能够更好的展示数据，可以添加一个页码的功能，可以直接使用window.print()弹窗中的选项来展示：

LuaViewSDK print 打印不显示 window.print打印预览不全_Math_03


但是如果这样的话，页眉和页脚都会展示，而且内容除了页码还有其他。因此我想自己处理这个页码内容。

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

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

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

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

上面的解决办法是每一行高度固定的情况下，如果每一行的内容不完全一致，导致每行的高度不固定，则上面的方法就可行了。

解决表格分页截断bug

window.print() 打印table时出现分页截断问题：
解决办法：给table添加以下css代码：

table{
	page-break-inside: avoid;
	page-break-after: avoid;
	page-break-before: avoid;
}

即可自动分页，不会出现内容截断问题，之前的解决办法是限制每行的高度，然后根据行数的索引来判断处理，不太合适

完成！！！