列印網頁的時候，如何讓指定的元素另起一頁（列印分頁）？

王铁柱6發表於2024-12-05
網頁

在前端開發中，控制列印分頁主要依靠 CSS 的 page-break 屬性。 你可以用它來指定在哪個元素之前或之後插入分頁符。以下幾種方法可以實現指定元素另起一頁：

1. page-break-before: 在元素 之前 插入分頁符。

.element-to-break-before {
  page-break-before: always;
}
  • always: 總是插入分頁符。
  • auto: 根據需要插入分頁符（瀏覽器預設行為）。
  • avoid: 避免在元素之前分頁。
  • left: 在左側插入分頁符（用於雙面列印）。
  • right: 在右側插入分頁符（用於雙面列印）。

2. page-break-after: 在元素 之後 插入分頁符。

.element-to-break-after {
  page-break-after: always;
}

同樣支援 always, auto, avoid, left, right 等值。

3. page-break-inside: 避免元素內部出現分頁符。

.element-to-avoid-break-inside {
  page-break-inside: avoid;
}

這對於表格或其他需要保持完整性的元素非常有用。 注意，avoid 並不總是有效，瀏覽器可能會根據內容長度和頁面大小進行調整。

4. 使用 <div style="page-break-before: always;"></div> 建立空 div 分隔:

如果你不想直接修改元素的樣式，可以插入一個空的 <div>，並設定其 page-break-before 或 page-break-after 屬性來強制分頁。

<div class="content">
  <!-- some content -->
</div>
<div style="page-break-before: always;"></div>
<div class="content">
  <!-- content that will start on a new page -->
</div>

示例：讓每個 <h2> 標題另起一頁：

h2 {
  page-break-before: always;
}

重要提示：

  • 瀏覽器相容性： 雖然 page-break 屬性被廣泛支援，但在不同瀏覽器中的表現可能略有差異。建議進行測試以確保在目標瀏覽器中獲得預期的效果。
  • 列印預覽： 使用瀏覽器的列印預覽功能可以檢視分頁效果，並進行調整。
  • 媒體查詢： 可以結合 @media print 使用 page-break 屬性，使其僅在列印時生效。
@media print {
  h2 {
    page-break-before: always;
  }
}
  • 複雜佈局： 對於複雜的佈局，可能需要結合多種方法才能實現理想的分頁效果。

透過靈活運用這些方法，你可以有效地控制網頁列印時的分頁，並獲得更清晰、易讀的列印輸出。

相關文章