写了一个html模板用于导出pdf,记一下关于page分页的几个用法
page-break-before
定义和用法
page-break-before 属性设置元素前的 page-breaking 行为。
尽管可以用 always 强制放上分页符,但是无法保证避免分页符的插入,创作人员最多只能要求用户代理尽可能避免插入分页。
应用于:position 值为 relative 或 static 的非浮动块级元素。
注释:请尽可能少地使用分页属性,并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。
可能的值
值 | 描述 |
---|---|
auto | 默认值。如果必要则在元素前插入分页符。 |
always | 在元素前插入分页符。 |
avoid | 避免在元素前插入分页符。 |
left | 在元素之前足够的分页符,一直到一张空白的左页为止。 |
right | 在元素之前足够的分页符,一直到一张空白的右页为止。 |
inherit | 规定应该从父元素继承 page-break-before 属性的设置。 |
page-break-inside
定义和用法
page-break-inside 属性设置元素内部的 page-breaking 行为。
尽管可以用 always 强制放上分页符,但是无法保证避免分页符的插入,创作人员最多只能要求用户代理尽可能避免插入分页。
应用于:position 值为 relative 或 static 的非浮动块级元素。
注释:请尽可能少地使用分页属性,并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。
可能的值
值 | 描述 |
---|---|
auto | 默认。如果必要则在元素内部插入分页符。 |
avoid | 避免在元素内部插入分页符。 |
inherit | 规定应该从父元素继承 page-break-inside 属性的设置。 |
page-break-after
定义和用法
page-break-after 属性设置元素后的 page-breaking 行为。
尽管可以用 always 强制放上分页符,但是无法保证避免分页符的插入,创作人员最多只能要求用户代理尽可能避免插入分页。
应用于:position 值为 relative 或 static 的非浮动块级元素。
注释:请尽可能少地使用分页属性,并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。
可能的值
值 | 描述 |
---|---|
auto | 默认。如果必要则在元素后插入分页符。 |
always | 在元素后插入分页符。 |
avoid | 避免在元素后插入分页符。 |
left | 在元素之后足够的分页符,一直到一张空白的左页为止。 |
right | 在元素之后足够的分页符,一直到一张空白的右页为止。 |
inherit | 规定应该从父元素继承 page-break-after 属性的设置。 |
设置A4值纵向大小
/*单位 pt点(磅) in英寸 mm毫米 cm厘米*/
@page {
/* size 定义纸张大小210mm 297mm A4纸 margin设置页边距 */
size: 210mm 297mm;
margin: 1.54cm 1.17cm 1.54cm 1.17cm;
mso-header-margin: 1.5cm;
mso-footer-margin: 1.75cm;
mso-paper-source: 0;
}
纸张横向,并且内容独占一页
添加class类
.last-division {
page-break-after: always;
margin-bottom: 0;
}
@page rotated {
/* 重新设置纸张大小,使其横向 */
/* size: landscape; */
size: 297mm 210mm;
}
.last-page {
page: rotated;
page-break-inside: avoid;
}
效果图
表格分页时被分割
修改前
给table表给的tr添加一个禁止分页
.table3 tr {
/* 给tr添加禁止分页 */
page-break-inside: avoid !important;
margin-bottom: 0;
}
修改后效果