web 实现分页打印功能

本是古典何须时尚 2022-01-18 23:23 335阅读 0赞

## 通过 css 的 page-break-after 属性结合 print() 实现 web 分页打印功能 ##

> 最近在工作中碰到了一个需要前端实现分页打印的功能，查了很多资料，最后找到了page-break-after属性可以实现，小白我高兴的敲起了代码。结果并没有想象中那么没有，有一些小坑。首先当设置了 `page-break-after: always;` 属性的元素之后，还有其它元素，在打印是就会分配到下一页， 可是当父元素设置了 **position: absolute, fixed; display: inline-block,** 属性之后分页效果就没用了。 还有就是兼容性问题在 **chrom，360，Edge** 中都没有问题 **Firefox** 好像不支持

> **print()** 方法用于打印当前窗口的内容。

[page-break-after 属性详解][page-break-after]

### 父级元素设置了 absolute fixed 定位的分页没用 ###

<div style="position: absolute; display: none;">
        <h1>父级元素设置了 absolute fixed 定位的分页没用</h1>
        <ul>
          <li style="page-break-after: always;">
            page1
            <h1>h1</h1>
            <h2>h2</h2>
            <h3>h3</h3>
          </li>
          <li style="page-break-after: always;">
            page2
            <h1>h1</h1>
            <h2>h2</h2>
            <h3>h3</h3>
          </li>
        </ul>
    </div>
    复制代码

### 多级嵌套没有问题 ###

<div style="display: none">
        <h1>多级嵌套没有问题</h1>
        <div>
          <div>
            <ul>
              <li style="page-break-after: always;">
                page1
                <h1>h1</h1>
                <h2>h2</h2>
                <h3>h3</h3>
              </li>
              <li style="page-break-after: always;">
                page2
                <h1>h1</h1>
                <h2>h2</h2>
                <h3>h3</h3>
              </li>
            </ul>
          </div>
        </div>
      </div>
    复制代码

### 直接使用空元素进行分页也是可行的 ###

<h1>直接使用空元素进行分页也是可行的</h1>
    <h1>1</h1>
    <div style="page-break-after: always;"></div>
    <h1>2</h1>
    <div style="page-break-after: always;"></div>
    3
    复制代码

谢谢大家的阅读，有错误之处，敬请指教。

转载于:https://juejin.im/post/5ce7538a518825639d1eff7d

[page-break-after]: https://link.juejin.im?target=http%3A%2F%2Fwww.w3school.com.cn%2Fcssref%2Fpr_print_page-break-after.asp