HTML 打印HTML内容至多个页面

在本文中，我们将介绍如何使用HTML来打印内容至多个页面。HTML是一种标记语言，用于创建网页。但是，HTML也可以用于打印，并且可以将HTML内容分成多个页面以方便打印。

阅读更多：HTML 教程

使用CSS的`@media print`媒体查询

要在HTML中将内容打印到多个页面上，我们可以使用CSS的@media print媒体查询。@media print允许我们指定在打印时应用的CSS样式。通过定义page-break-before和page-break-after属性，我们可以控制在哪里将内容分页。

下面是一个使用@media print的示例：

<!DOCTYPE html>
<html>
<head>
<style>
@media print {
  .page-break { page-break-before: always; }
}
</style>
</head>
<body>

<h1>第一页</h1>
<p>第一页的内容。</p>

<div class="page-break"></div>

<h1>第二页</h1>
<p>第二页的内容。</p>

</body>
</html>

在上面的示例中，我们定义了一个@media print媒体查询，并为.page-break元素指定了page-break-before: always属性。这意味着在打印时，将在.page-break元素之前插入一个分页符。这样，第一个<h1>和<p>元素将打印在第一页上，而第二个<h1>和<p>元素将打印在第二页上。

使用CSS的`page`媒体类型

除了@media print媒体查询，我们还可以使用CSS的page媒体类型来控制内容的分页。page媒体类型可以指定不同的页面样式，并且可以使用size和break-before等属性来控制页面的分页。

下面是一个使用page媒体类型的示例：

<!DOCTYPE html>
<html>
<head>
<style>
@page {
  size: A4;
  margin: 20mm;
}
h1 {
  break-before: always;
}
</style>
</head>
<body>

<h1>第一页</h1>
<p>第一页的内容。</p>

<h1>第二页</h1>
<p>第二页的内容。</p>

</body>
</html>

在上面的示例中，我们使用@page规则指定了页面的大小和页边距。我们还使用break-before: always属性为<h1>元素指定了总是插入分页符。这样，在打印时，每个<h1>元素之前都会插入一个分页符。

使用JavaScript进行动态分页

如果我们的内容是动态生成的，我们可以使用JavaScript来实现动态分页。JavaScript提供了window.print()方法来触发打印操作。我们可以在打印之前使用JavaScript动态创建分页符。

下面是一个使用JavaScript进行动态分页的示例：

<!DOCTYPE html>
<html>
<head>
<script>
function printContent(content) {
  var pages = content.split("<h1>");
  var html = "";
  for (var i = 0; i < pages.length; i++) {
    html += "<div class='page'>";
    html += "<h1>" + pages[i];
    if (i < pages.length - 1) {
      html += "<div class='page-break'></div>";
    }
    html += "</div>";
  }
  var printWindow = window.open("", "_blank");
  printWindow.document.open();
  printWindow.document.write("<html><head><style>@media print{.page-break{page-break-before:always}}</style></head><body>" + html + "</body></html>");
  printWindow.document.close();
  printWindow.print();
}
</script>
</head>
<body>

<button onclick="printContent('第一页<h1>第二页')">打印</button>

</body>
</html>