html - 拆分 HTML 页面，以便打印机将其拆分为单独的页面

Question

我正在计划在线客户可用的价格表，我正在考虑简单的非常长的页面或 div 容器，其中包含一些锚链接以帮助跳转到不同的产品。

但是，如果有人想打印某些产品的价目表，我不希望打印所有页面，而只打印当前页面。是否有任何打印中断字符或标签？

以防万一有人有更好的想法，我想要实现的只是在 html 中使用价目表在一个地方更改它，但仍然能够将单独的产品价目表转换为 PDF 文件，以便通过电子邮件发送特定产品。

Answer 1

使用这个 CSS：

@media print
{
      .page-break  { display:block; page-break-before:always; }

}

然后在您希望页面中断的 HTML 中引用它：

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

你去吧:)

Answer 2

根据 w3schools，您还可以执行以下操作：

@media print {
  .page {page-break-after: always;}
}

然后，在您的 HTML 中：

<div class="page">
  <!-- Page Contents -->
</div>

或者，如果您在每一页下都有一个页脚（例如用于页码）：

@media print {
  footer {page-break-after: always;}
}