Car*_*ton 9 html javascript css printing
我正在使用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.
小智 5
这将显示页码，但不显示总页数：
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>
在页脚中。
浏览器：火狐19.0.2
我已经能够使用 wkhtmltopdf 在创建用于打印的 PDF 时实现分页符。虽然我不确定我的解决方案是否与非 webkit 浏览器兼容，但我确信如果需要，您可以获得所有浏览器的供应商前缀。
这就是我所做的，使用page-break-inside: avoid;&page-break-after: always;
然后使用 jquery 计算出各部分的高度并计算（如果页面大小为 a4）发生了多少次中断，并使用 jquery 和 pdf 页脚动态对页面进行编号（在创建 pdf 之前），因此当用户下载了 pdf，其编号正确。
我建议设置页面（作为打印样式表），以便页码在页面中的这些高度处可见，也许使用绝对定位。
但我不认为这是万无一失的。
给他们一个要打印的 PDF，然后您就可以拥有更多控制权，而不必担心网络打印样式表，只要 PDF 下载链接显着显示即可。