将 HTML 文档格式化为多个 A4 大小的部分答案

【问题标题】：Format a HTML document into multiple A4 size sections将 HTML 文档格式化为多个 A4 大小的部分
【发布时间】：2012-03-15 11:06:44
【问题描述】：

这是我目前的问题。

我想生成一个 HTML 页面，其中包含大约 40 张优惠券。每张优惠券必须带有一个 A4 大小的部分。

所以，如果我要打印 HTML 文档，我希望每个打印的页面都包含 1 张优惠券。

关于如何实现这一点的想法？

【问题讨论】：

【解决方案1】：

以下 CSS 应该可以满足您的需求，将类名替换为适合您的 DOM 结构的任何内容

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

这将始终在元素之后插入分页符，您也可以使用page-break-before 在元素之前实现分页符。

【讨论】：

【解决方案2】：

您永远不会使用 HTML 获得非常精确的解决方案，因为每个浏览器都决定其打印 HTML 的方式是最佳的，并添加各种页眉和页脚，从而改变页面尺寸以及客户端打印机实际打印它的方式。

您最好生成优惠券的 PDF，您可以使用 PHP 扩展轻松完成。

【讨论】：

这是不正确的，CSS2+ 包含了非常支持的 page-break-before/after 属性，结合打印媒体查询，您实际上可以实现相当可靠的打印样式，唯一一点你不能保证是用户打印页边距，但如果您需要的只是分页符，那么通过 CSS 很容易实现。
我现在不知道，但我上次尝试使用 page-break-after:always 时，它在 Chrome 和 Safari 中根本不起作用。我对印刷媒体查询的经验是仅将其用于剥离样式。
我同意，随着开发的增加，我将不得不使用 PDF 作为解决方案

【解决方案3】：

您可以执行以下步骤：

在其 css 样式中为每个优惠券定义 width:100。这将使用纸张的最大宽度。
在每张优惠券的 css 属性中使用 page-break-after:always。这将强制在下一页显示下一张优惠券。 (http://msdn.microsoft.com/en-us/library/ms530842(v=vs.85).aspx)

不要忘记注意优惠券的高度。尽量避免在其中放置大量行。
您可以为每张优惠券使用<fieldset> 标签并在其上应用 css 属性。

【讨论】：