web 實現分頁列印功能

追_光_者發表於2019-03-19
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
複製程式碼

謝謝大家的閱讀，有錯誤之處，敬請指教。

相關文章