page-break-after:always；解决window.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条：

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

如何强制断页呐？？

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

什么情况下会断页呐？？

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

表格条数超过14条，则第一页index==13时，需要断页
表格条数超过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()弹窗中的选项来展示：

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

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

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

上面的情况中，第二种情况会比较难思考，可以跟第三种情况一同处理：
第三种情况：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都忘了，所以花了我很长时间才搞定。。。。

完成！！！