vue 实现自定义分页打印 window.print

首先这里是我自定义了打印界面才实现的效果，如果不用自定义界面实现，应该是一样的吧。具体可能需要自己去试试看

我的需求是界面有两个表格，点击全部打印，我需要把第一表格在打印是第1页，第二个表格是第二页
如图：

在网上找了很多办法，有一些需要应用其他插件实现。最终在菜鸟教程看到page-break-after 属性

这里需要注意的是这个样式需要写在行内样式里才生效。（已经踩过坑了）

自定义打印界面

<section v-for="ite in 2" :key="ite" style="page-break-after: always">
<h3>打印单{{item}}</h3>
      <table
          style="
            width: 100%;
            border-color: #ccc;
            border-collapse: collapse;
            color: #7b7d80;
            text-align: center;
          "
          border="1"
          cellspacing="0"
          cellpadding="0"
          class="table"
        >
        这里是自定义表格内容
        </table>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18