基于 HTML 的报告被分页撕成碎片答案

【问题标题】：HTML based report being ripped to pieces by pagination基于 HTML 的报告被分页撕成碎片
【发布时间】：2009-12-30 16:48:10
【问题描述】：

我创建了一个基于 HTML 的报表，它可以是可变长度和 C# 中的段数（这就是不使用 Crystal Reports 的原因），我不能使用美妙的 http://www.printfriendly.com/，因为该报表是基于 Intranet 的（嘘，嘶嘶声）。

我创建了一个 media=print CSS 文件，该文件用于使格式尽可能高效地使用纸张和墨水，但我遇到了一个问题。报告中有一个很长的表格，大约有 50 行表格，每行大约高度：200 像素。不幸的是，由于自动分页，某些表格行正在被切片，表格行的一部分在一个页面上，其余的在下一页上。无论如何（希望通过 CSS），将分页选项设置为不分隔表格元素（或类似元素）？

谢谢，亚历克斯

【问题讨论】：

我希望 CSS 能更好地处理打印表格，但它似乎与 CSS 分页符选项的表现不佳。我也想看看这个问题的解决方案。
抱歉回复迟了，放假了。经过仔细考虑，我决定将答案交给 Brian，因为他确实通过测试发现了一些有趣的结果，并建议了 Prince 的解决方案。我还标记了 markjgrant 的答案，因为这是通过我没有想到的 hack 的可能解决方案。

标签： .net html css printing c#-2.0

【解决方案1】：

page-break-inside: avoid 属性应该控制这一点，但看起来大多数浏览器不支持 tr 或 td 元素。在我的测试中，Opera 是唯一支持此属性的，如以下测试中所使用的：

<!DOCTYPE html>
<title>Page Break Test</title>
<style>tr, td { page-break-inside: avoid }</style>
<table border=1>
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
  <tr height=200><td>This is a test. This should be tall.<td>Another column.
</table>

如果您可以使用 Opera，这可能就足够了。另一种选择是查看Prince 来打印您的报告，因为它对打印样式表功能的支持往往比浏览器要好得多（尽管我没有特别测试过这个功能）。

【讨论】：

【解决方案2】：

如果您的行高恰好是固定的，您可以计算出一页可以容纳多少行，然后在每第 n 行使用 page-break-after: always 以在适当的位置强制分页。这有点小技巧，但它可能是您的最佳选择。

【讨论】：

但他永远无法确定适合多少，因为不同的浏览器打印不同，用户可以增加/减少字体大小，用户可以更改打印边距和页面大小。
media=print CSS 可以最大限度地减少这些因素，但不能完全消除它们。

【解决方案3】：

不幸的是，使用 HTML 不可能可靠地完成您想要的。

如果您想对打印的内容进行高级别的控制，我建议您让报告生成器输出 PDF 或 XPS 而不是 HTML（或者按照 Brian Campbell 的建议，使用 Prince 等可以获取 HTML 并转换将其转换为 PDF）。

【讨论】：