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

发布于 2024-08-16 12:58:58 字数 398 浏览 7 评论 0原文

我创建了一个基于 HTML 的报告，该报告可以是可变长度和 C# 中的段数（这就是未使用 Crystal Reports 的原因），并且我无法使用精彩的 http://www.printFriendly.com/，因为该报告是基于内联网的（嘘声，嘶嘶声）。

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

谢谢，亚历克斯

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

抠脚大汉 2024-08-23 12:58:58

page-break-inside: escape 属性应该控制这一点，但看起来大多数浏览器在 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 来打印报告，因为它往往对打印有更好的支持样式表功能比浏览器功能多（尽管我没有特别测试此功能）。

The page-break-inside: avoid property should control this, but it looks like most browsers don't support that on tr or td elements. In my testing, Opera is the only one that honors this property, as used in the following test:

<!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>

If you can use Opera, this might be good enough. Another option would be to look into Prince for printing your reports, as it tends to have much better support for print stylesheet features than the browsers do (though I haven't tested this feature in particular).

回复收藏 0 原文