【css】关于pdf分页（page-break）

最近的在写报告的需求，因为报告内部需要加入echarts，并且用于真实的数据导出，还要动态掌控。所以需要前端将给定的word模版转为网页。这里分享其中的一个小小技巧。

那么问题来了，我们如何把控页面的样式，并可以轻松做到控制不同内容的分页呢。快点告别margin...吧！

那么CSS来了！

page-break-before

顾名思义，此CSS属性用于在打印文档时在元素之前添加分页符。在打印文档期间，它将在指定元素之前插入一个分页符。我们不能在绝对定位的元素上使用此CSS属性，也不能在不会生成框的空 <div>元素上使用此CSS属性。

此CSS属性表示是否允许分页在元素框之前。 CSS属性 page-break-after 、 page-break-inside 和 page-break-before ，可帮助我们定义行为。

page-break-before: auto | always | left | right | avoid | initial | inherit;

值	说明
auto	这是默认值，必要时在元素之前插入分页符。
always	此值始终强制在指定元素之前分页。
avoid	用于避免在元素之前出现分页。
left	此值将在元素之前强制分页一次或两次，以便将下一页描述为左侧页面。
right	right 值会在元素之前强制分页一次或两次，以便将下一页描述为右侧页面。
initial	它将属性设置为其默认值。
inherit	如果指定了此值，则对应的元素将使用其父元素 page-break-before 属性的计算值。

使用方式

我们可以将不同的页面也抽离出组件，然后用一个<div/>标签包住。

这样子，在启动打印功能时，即可实现分页需求。

<div class="page">
        ..写本页面的具体代码
</div>

.page{
   page-break-before: always;
   page-break-after: always;
   page-break-inside: avoid;
}