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

Posted 2023-02-24

【中文标题】拆分 HTML 页面，以便打印机将其拆分为单独的页面

【英文标题】：Splitting HTML page so Printer splits it into separate pages

【发布时间】：2013-01-19 03:51:51

【问题描述】：

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

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

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

【参考方案1】：

使用这个 CSS：

@media print

      .page-break   display:block; page-break-before:always; 

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

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

你去吧:)

【讨论】：

非常感谢。你是救生员 :D :D

非常感谢您。在打印时花了一整天的时间修复一些页面问题，现在刚刚添加了它，它按预期工作:) 以防万一有人想在分页符的同时为每页添加边距。 .page-break 显示：块；分页前：总是；上边距：2cm;

【参考方案2】：

As per w3schools，你也可以这样做：

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

然后，在您的 HTML 中：

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

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

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