如何實現適用於列印的CSS和HTML頁面分頁？

一、CSS實現列印樣式

在實現適用於列印的CSS和HTML頁面分頁之前，我們需要先了解如何設置列印樣式。CSS中有一個特殊的偽類 :print，它代表的是列印頁面的樣式。我們可以在CSS中設置 @media print {}，然後在其中定義列印時的樣式。

@media print {
  /* 設置列印頁面的樣式 */
}

當我們需要在列印頁面中隱藏某些元素時，可以使用 display:none; 來隱藏元素。

@media print {
  /* 隱藏元素 */
  .hidden-print {
    display:none;
  }
}

二、HTML分頁插入

在HTML頁面中，我們可以使用CSS的偽元素 :before 和 :after 來插入分頁符。具體地，在我們想要插入分頁符的元素上設置 page-break-before: always; 和 page-break-after: always;，就可以在該元素前後插入分頁符了。

.page-break {
  page-break-before: always;
  page-break-after: always;
}

三、JS實現自動分頁

有時候，我們需要動態地生成HTML頁面，並且需要在某些元素處進行分頁。這時候就需要通過JS來實現自動分頁。

首先，我們需要把頁面中的所有內容存儲起來，並計算出每個元素的高度。然後，我們可以通過JS來遍歷所有元素，並判斷哪些元素需要被分頁。當我們需要插入分頁符時，可以通過 document.createElement('div') 創建一個 div 元素，並添加一個類名，來設置該元素的樣式。最後，我們可以使用 element.parentNode.insertBefore(insertElement, element.nextSibling); 來插入分頁符元素。

// 遍歷所有元素，並計算出元素的高度
let elements = document.querySelectorAll('.printable');
let elementHeights = [];
for (let element of elements) {
  elementHeights.push(element.offsetHeight);
}

// 判斷哪些元素需要被分頁，並插入分頁符
let pageHeight = 1000;
let currentHeight = 0;
for (let i = 0; i  pageHeight) {
    let insertElement = document.createElement('div');
    insertElement.classList.add('page-break');
    elements[i].parentNode.insertBefore(insertElement, elements[i].nextSibling);
    currentHeight = elementHeights[i];
  }
}