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
複製代碼

謝謝你們的閱讀，有錯誤之處，敬請指教。