HTML文档打印分页标记

关于html文档打印,实现指定位置分页这个需求,以前是不知道如何处理了的。

也不知道这个CSS属性是什么时候出现的。总之我是刚刚知道的。好久没有更新文章了,正好记录一下吧。

代码很简单,只要一个CSS属性就可以了。

    @media print{
      .page{
        page-break-after: always;
      }
    }

在html文档里,选择器.page的元素结束处,都被视为分页。

  <div class="page">
    这是第一个分页
  </div>
  <div class="page">
    这是第二个分页
  </div>

然后顺着爬了一下,看了下page-break-after的文档。一起简单了解一下:

auto 默认。如果必要则在元素后插入分页符。
always 在元素后插入分页符。
avoid 避免在元素后插入分页符。
left 在元素之后足够的分页符,一直到一张空白的左页为止。
right 在元素之后足够的分页符,一直到一张空白的右页为止。
inherit 规定应该从父元素继承 page-break-after 属性的设置。

注:Firefox,Chrome和Safari不支持属性值"avoid","left"和"right"

这东西一般用不到,需要的时候又真有用。

很简单的东西,没啥可多说的,就这么多了。

2023-03-10 14:38:38 1110 0

参与讨论

选择你的头像