【js 打印分页】

vue框架中 实现打印分页的功能

在项目开发中经常会遇到打印的功能，有时候还会遇到不定长的打印内容，多个内容一起打印，这时候需要我们代码去控制在一个内容的地方分页

分页方法

在样式中有规定几个打印的样式

page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的打印方式。

每个打印属性都可以设定4种设定值：auto、always、left和right。其中Auto是默认值，只有在有需要时，才需设定分页符号 (Page breaks)。

page-break-before若设定成always，则是在遇到特定的组件时，打印机会重新开始一个新的打印页。

page-break-before若设定成left，则会插入分页符号，直到指定的组件出现在一个左边的空白页上。

page-break-before若设定成right，则会插入分页符号，直到指定的组件出现在一个右边的空白页上。

page-break-after属性会将分页符号加在指定组件后，而非之前。
参考链接：https://cloud.tencent.com/developer/article/1938054

代码实现

     <div ref="print">
   <div class="print-box" v-for="(printItem, printIndex) in printList" :key="printItem.code" style="width: 794px; min-height: 1123px">
  <打印内容>
  在每个打印内容的最后加上分页符，除了最后一个，否则会打出一张空白页
      <div v-if="printIndex != printList.length-1" style="page-break-before: always"></div>
    </div>
  </div>