page-break-before\page-break-inside\page-break-after用法

最新推荐文章于 2024-12-16 12:33:37 发布

～Serendipity～

最新推荐文章于 2024-12-16 12:33:37 发布

阅读量4.7k

点赞数 6

文章标签：前端

本文链接：https://blog.csdn.net/ZMJ_QQ/article/details/125724371

版权

这篇博客介绍了在HTML模板中使用CSS控制PDF分页的方法，包括page-break-before、page-break-inside和page-break-after属性的用法，以及如何设置页面大小和方向。通过避免在特定元素前后插入分页符，可以优化长内容的PDF导出效果。同时，还展示了如何处理表格分页问题，确保内容的完整性和阅读体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写了一个html模板用于导出pdf，记一下关于page分页的几个用法

参考地址CSS Paged Media Module Level 3

page-break-before

定义和用法

page-break-before 属性设置元素前的 page-breaking 行为。

尽管可以用 always 强制放上分页符，但是无法保证避免分页符的插入，创作人员最多只能要求用户代理尽可能避免插入分页。

应用于：position 值为 relative 或 static 的非浮动块级元素。

注释：请尽可能少地使用分页属性，并且避免在表格、浮动元素、带有边框的块元素中使用分页属性。

CSS page-break-before 属性

可能的值

值	描述
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;
        }

修改后效果