web 实现分页打印功能

通过 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 属性详解

父级元素设置了 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/5c90cc635188256b185e1fb0