如何实现适用于打印的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 < elements.length; i++) {
  currentHeight += elementHeights[i];
  if (currentHeight > pageHeight) {
    let insertElement = document.createElement('div');
    insertElement.classList.add('page-break');
    elements[i].parentNode.insertBefore(insertElement, elements[i].nextSibling);
    currentHeight = elementHeights[i];
  }
}