最近的在寫報告的需求，因為報告內部需要加入echarts，并且用于真實的數據導出，還要動態掌控🌚。所以需要前端將給定的word模版轉為網頁。這里分享其中的一個小小技巧。

那么問題來了，我們如何把控頁面的樣式，并可以輕松做到控制不同內容的分頁呢。快點告別margin...吧！

那么CSS來了！

page-break-before

顧名思義，此CSS屬性用于在打印文檔時在元素之前添加分頁符。在打印文檔期間，它將在指定元素之前插入一個分頁符。我們不能在絕對定位的元素上使用此CSS屬性，也不能在不會生成框的空?<div>元素上使用此CSS屬性。

此CSS屬性表示是否允許分頁在元素框之前。 CSS屬性?page-break-after?、?page-break-inside?和?page-break-before?，可幫助我們定義行為。

page-break-before: auto | always | left | right | avoid | initial | inherit;

值	說明
auto	這是默認值，必要時在元素之前插入分頁符。
always	此值始終強制在指定元素之前分頁。
avoid	用于避免在元素之前出現分頁。
left	此值將在元素之前強制分頁一次或兩次，以便將下一頁描述為左側頁面。
right	right?值會在元素之前強制分頁一次或兩次，以便將下一頁描述為右側頁面。
initial	它將屬性設置為其默認值。
inherit	如果指定了此值，則對應的元素將使用其父元素?page-break-before?屬性的計算值。

🌰使用方式

我們可以將不同的頁面也抽離出組件，然后用一個<div/>標簽包住。

這樣子，在啟動打印功能時，即可實現分頁需求。

<div class="page">..寫本頁面的具體代碼 </div> .page{page-break-before: always;page-break-after: always;page-break-inside: avoid; }

總結

以上是生活随笔為你收集整理的【css】关于pdf分页（page-break）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。