首先这里是我自定义了打印界面才实现的效果,如果不用自定义界面实现,应该是一样的吧。具体可能需要自己去试试看
我的需求是界面有两个表格,点击全部打印,我需要把第一表格在打印是第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>