Question

我正在使用HTML生成报告，我正在使用CSS来控制使用分页符等的分页。我已经为用户提供了一次打印多个报告的选项，我创建了一个单独的部分动态生成的HTML文档。将其作为单个文档使其成为单个打印作业，以避免打印假脱机问题。

我的问题是：我想以“page x of n”格式对较大动态HTML的一部分页面进行编号。但是，如果我让打印机执行此操作，它会将文档（正确地）视为单个文档并对整个文档进行编号。

我有什么方法可以确定何时会发生CSS分页符，所以我可以在打印前将它们计算为一个部分，然后将我自己的编号（例如HTML元素）放入长单个部分中文件？

似乎应该有一种方法让我这样做，但在过去的几天里，解决方案躲过了我，所以我想我会ping Stackoverflow。

更新：我最终做了什么：

我接受了克里斯托弗的回答，因为虽然我没有完全使用它，但它指出了我正确的方向。

我最终使用jQuery对内容进行了计算，基于打印的纸张大小，边距，字体大小等，然后添加了具有用于分页的CSS的分页符元素。我跟踪添加了多少分页符div，然后在处理完所有内容后更新每个分页符div中的html“page x of n”信息。这让我可以避免在开始时知道会有多少页面（感谢jQuery .each）。

显然这个解决方案存在一些问题：

“x页面的n”元素不会显示为真正的页脚，而是显示在每个页面上内容的底部。在我的情况下，这是一个可以接受的妥协。
拆分内容大于页面的内容元素，特别是考虑到大部分内容都是由php生成的，有点复杂。我让它成功了，但同样，它需要的假设可能会因打印变化而中断。
计算取决于有关打印纸张尺寸，边距，字体大小等的假设。在我在Intranet上运行的情况下，这也是可接受的折衷方案，因为我可以控制这些选项。可以添加附加代码以处理将来的一些变化（例如纸张大小）。

这个解决方案，虽然不完美，有点“脆弱”，解决了我的问题，允许我一次打印多个报告，避免打印机假脱机，跟踪和重新启动页面编号，并避免生成PDF作为中间步骤印刷。

我发现这是一个奇怪的难以破解，所以我仍然会欣赏有关解决方案的意见和建议。

谢谢！

更新2：最终解决方案......自己避免头痛：

虽然我采用这种方法可能比我应该做的更远，但取得了一些小小的成功，最终解决方案真的不是一个，因为它最终变得太“脆弱”了。报告格式的任何变化，添加到现有报告中的新内容，纸张大小等都打破了计算，最终导致了大量的额外工作！

那么，最终的解决方案呢？ “抵抗力是徒劳的！”只需将报告作为PDF格式。如果你愿意，你可以开始“我们告诉过你”合唱，我可以接受;-)

我选择了TCPDF图书馆，这本书很棒，如果有点难以开始的话。这些例子非常有用。现在我对报告进行了完整的自定义，所有内容都按原样生成。多个报告很容易创建为单个PDF（防止打印假脱机问题），页面组允许编号完全按照我的需要工作。

所以，如果你想做这样的事情，我会建议你切入追逐，跳过HTML / CSS类型报告的挫折，并做PDF。

Answer 1

这将显示页码，但不显示总页数：

footer {
    position:fixed;
    bottom:0;
    left:0;
}

body {
    counter-reset: page_number;
}

#page-number:after {
    counter-increment: page_number;
    content: "Page " counter(page_number);
}

有类似

的东西

<p id='page-number'></p>

在页脚中。

浏览器：Firefox 19.0.2

Answer 2

我假设您在每个报告的末尾放置一个CSS分页符，而不是在每个页面的末尾手动放置。所以你的问题是知道什么时候在一个长HTML文档中自然会发生分页。答案是 - 你做不到。即使您知道页面中有多少行适合（例如），您也只能知道给定页面大小和打印设置。如果有人决定在法律文件上打印200％的法律报告，那么你的文件永远不会知道。在我看来，你的选择是1）猜测或2）不要担心它。

Answer 3

我已经能够使用wkhtmltopdf在创建用于打印的PDF时实现分页符。虽然我不确定我的解决方案是否与非webkit浏览器兼容，但我确定如果需要，你可以获得所有broswers的供应商前缀。

继承人我做了什么，使用page-break-inside: avoid;＆amp; page-break-after: always;

然后使用jquery我计算了我的部分的高度并计算（如果页面大小将是a4）中断发生了多少次，并使用jquery和pdf页脚动态编号页面（在创建pdf之前）所以当用户下载pdf时，它编号正确。

我建议的是设置页面（作为打印样式表），以便在页面的这些高度可以看到页码，也许使用绝对定位。

但我认为这不是安全的。

给他们一个PDF来打印，然后你有更多的控制权，不必担心网页打印样式表，前提是PDF下载链接是显着的显示。

Answer 4

您不能计算分页符，但您可以计算分栏符，其行为非常相似。

只要您有分页符样式，请将它们与匹配的分栏符号配对：

-webkit-column-break-inside: avoid;
-webkit-break-inside: avoid;

然后将报告设置为使用与打印页面大小相匹配的列：

.page.precalc {
    width: 16800mm;
    height: 257mm;
    -webkit-column-width: 168mm;
    .content {
        width: 168mm;
    }
}

分栏符与分页符的工作方式非常相似，因此您只需测量水平位置即可确定元素的页码。

var left = el.getBoundingClientRect().left;
pageNumber = Math.round(left/635) + 1

CSS列仍然有点支持，因此可能无法正确打印。但是，您可以在完成布局计算后立即删除.precalc样式，以便视图将返回到原始垂直布局。根据使用情况，屏幕/打印介质查询也可以起作用。

以上内容适用于我使用phantomjs生成目录。让它在用户控制的任意浏览器中工作有点复杂。

Answer 5

以下代码片段将产生;在页面上的每个h2之前打印分页符。

摘自here

<style type="text/css">
  h2 {
    page-break-before: always;
  }
</style>

如何计算打印HTML的CSS分页符？

5 个答案: