如何计算打印HTML的CSS分页符？ [英] How can I count CSS page breaks for printed HTML?

问题描述

我正在使用HTML生成报告，并且正在使用CSS通过page-break-after等来控制分页。我为用户提供了一次打印多个报告的选项，这些报告是我作为单个报告的一部分创建的动态生成的HTML文档。将其设为单个文档可以使其成为单个打印作业，从而避免打印假脱机问题。

I am generating reports using HTML and I am using CSS to control the page breaking using page-break-after, etc. I have given the user the option to print multiple reports at once, which I create as sections of a single dynamically generated HTML document. Making it a single document allows it to be a single print job to avoid print spooling issues.

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

My problem is this: I would like to number the pages of a section of the larger dynamic HTML in the format "page x of n". However, if I let the printer do it, it sees the document (rightly) as a single document and numbers the whole document.

有什么方法可以确定CSS分页符何时发生，因此我可以在打印前先将它们计算为一个部分，然后输入自己的编号（HTML

Is there any way I could determine when the CSS page breaks are going to occur, so I could count them for a section before printing, and put my own numbering (HTML element for example) in for the sections in the long single document?

似乎应该为我提供一种方法，但是在过去的几天中，解决方案使我难以捉摸，所以我认为我应该对Stackoverflow进行ping操作。

It seems like there should be a way for me to do this, but over the past few days the solution eludes me, so I thought I would ping Stackoverflow.

更新：我最终所做的事情：

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

I have accepted Christopher's answer because although I didn't use it exactly, it pointed me in the right direction.

我最终使用jQuery根据要打印的纸张大小，页边距，字体大小等对内容进行了计算，然后添加了用于分页符的元素有用于分页的CSS。我跟踪添加了多少个分页符div，然后在处理完所有内容后更新每个分页符div中的html n个页面x信息。这样一来，我就不必知道一开始会有多少页（感谢jQuery .each）。

I ended up doing calculations on the content using jQuery, based on the paper size being printed to, margins, font size, etc. and then adding elements for page breaks that have CSS for page breaking. I track how many of the page break divs are added, and then update the html "page x of n" information in each page break div once all the content is processed. That allowed me to avoid having to know how many pages there would be at the beginning (thanks jQuery .each).

显然，此解决方案存在一些问题：

Obviously there are some issues with this solution:

1. 第x页，共n页元素不是真正的页脚，而是显示在每页内容的底部。在我的情况下，这是一个可以接受的折衷方案。

1. The "page x of n" elements don't appear as true footers, but rather at the bottom of the content on each page. In my situation that is an acceptable compromise.

将内容元素拆分成大于页面的内容，尤其是考虑到大部分内容是由php生成的，有点复杂。我使它工作了，但同样，它需要的假设可能会因打印变化而中断。

Splitting content elements that were in themselves larger than a page, especially considering most of the content is generated by php, got a little complicated. I made it work, but again, it requires assumptions that could break with printing variations.

计算取决于有关打印纸张尺寸，边距，字体的假设大小等。对于我在Intranet上运行的情况，这也是可以接受的折衷方案，因为我可以控制这些选项。可以添加其他代码来处理将来的一些变化（例如纸张尺寸）。

The calculations depend on assumptions about the printed paper size, margins, font size, etc. In my situation running on an intranet, that is again an acceptable compromise because I can control those options. Additional code can be added to handle some amount of variation in future (paper size for example).

此解决方案，尽管不是很完美并且有点脆弱，但它解决了我的问题，使我可以一次打印多个报告，从而避免打印机假脱机超时，跟踪并重新启动页码，并避免生成PDF作为打印的中间步骤。

This solution, although not perfect and a little "brittle", solves my problem, allows me to print multiple reports at once avoiding printer spooling timeouts, keeps track of and restarts page numbering, and avoids generating PDFs as an intermediate step for printing.

我发现这是一个很难破解的螺母，所以我还是很感激解决方案中的意见和建议。

I found this a oddly hard nut to crack, so I would still appreciate opinions and input on the solution.

谢谢！

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

尽管我使用这种方法的步伐可能比我想做的要好得多，但取得了一些小小的成功，但最终解决方案并不是真正的解决方案，因为它最终变得太脆弱，无法应对变更。报告格式的任何更改，添加到现有报告中的新内容，纸张大小等都破坏了计算，最终导致大量的额外工作！

Although I went perhaps farther than I should have with this approach, with some small successes, in the end the solution really wasn't one because it just ended up being far too "brittle" to changes. Any change in report format, new content added to existing reports, paper size etc. broke the calculations and just ended up in a ridiculous amount of extra work!

那么，最终解决方案是什么？ 抵抗是徒劳的！只需将报告制作为PDF 。如果愿意，您可以开始我们告诉过您合唱；-)

So, the end solution? "Resistance is futile!" Just do the reports as PDFs. You may commence the "we told you so" chorus if you wish, I can take it ;-)

我选择了 TCPDF 库，如果开始时有点困难，那将是一个很好的库。这些示例非常有帮助。现在，我已经对报告进行了完全自定义，并且一切都按需生成。多报告可以很容易地创建为具有页面组的单个PDF（防止打印假脱机问题），从而使编号工作完全符合我的需要。

I went with the TCPDF library, which has been excellent, if a little tough going to get started. The examples are very helpful. Now I have complete customization over the report, and everything get generated as it should. Mulitple reports are easily created as a single PDF (preventing the print spooling issue) with page groups that allows for the numbering to work exactly as I need.

因此，如果您尝试做这样的事情，我建议您切入正题，跳过对HTML / CSS类型报告的沮丧，然后做PDF。

So, if you are trying to do something like this, I would recommend you cut to the chase, skip the frustration with HTML/CSS type reports, and do PDFs.

推荐答案

使用wkhtmltopdf，能够在创建打印PDF时实现分页符。
，尽管我不确定我的解决方案是否与非Webkit浏览器兼容，但我不确定如果需要的话，您可以为所有浏览器获取供应商前缀。

Ive been able to implement page breaks whilst creating PDFs for print, using wkhtmltopdf. though im not sure if my solution is compatible with non webkit browsers but im sure you can get a vendor prefix for all the broswers if needs be.

此处我使用 page-break-inside做的事情：避免; & page-break-after：总是;

Heres what i did, using page-break-inside: avoid; & page-break-after: always;

然后使用jquery计算出各节的高度并计算（如果页面大小将为a4）发生了多少次中断，并使用jquery和pdf页脚对页面进行了动态编号（在创建pdf之前），因此当用户下载pdf时，页面已正确编号。

Then using jquery I worked out the heights of my sections and calculated (if the page size is going to be a4) how many times a break occured, and numbered the pages dynamically using jquery and pdf footers (before creating the pdf) so when the user downloaded the pdf it was numbered correctly.

我建议设置页面（作为打印样式表），以使页面编号在页面的这些高度处可见，也许使用绝对位置。

What I reccomend is setting the page up (as the print stylesheet) so that page numbers are visible at these heights in the page, using absolute positionsing perhaps.

但是我不认为这是故障保护。

but I dont think this is failsafe.

给他们一个PDF打印，这样您就可以控制更多不必担心Web打印样式表，只要PDF下载链接显着分布。

Give them a PDF to print, then you have more control and dont have to worry about the web-print stylesheet, provided the PDF download link is prominently dispalyed.

这篇关于如何计算打印HTML的CSS分页符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！