打印大型 HTML 表时如何处理分页符
[英]How to deal with page breaks when printing a large HTML table
问题描述
我有一个项目需要打印一个包含多行的 HTML 表。
我的问题是表格打印在多页上的方式。 它有时会将一行切成两半，使其无法阅读，因为其中一半位于页面的边缘，其余部分打印在下一页的顶部。
我能想到的唯一可行的解决方案是使用堆叠的 DIV 而不是表格，并在需要时强制分页。但在完成整个更改之前，我想我可以在这里问过。
13 个解决方案
解决方案1
298 已采纳 2009-11-19 14:31:42
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tbody>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
解决方案2
58 2011-10-14 05:07:46
注意：当使用 page-break-after:always 标签时，它会在表格的最后一位之后创建一个分页符，每次都在最后创建一个完全空白的页面！ 要解决此问题，只需将其更改为 page-break-after:auto。 它会正确地中断并且不会创建额外的空白页。
<html>
<head>
<style>
@media print
{
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
</head>
<body>
....
</body>
</html>
解决方案3
27 2013-09-11 14:03:43
从思南 Ünür 解决方案扩展：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
div { page-break-inside:avoid; } /* This is the key */
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
似乎在某些浏览器中page-break-inside:avoid只考虑块元素，而不考虑单元格、表格、行和内联块。
如果您尝试display:block TR标签，并在那里使用page-break-inside:avoid ，它可以工作，但会干扰您的表格布局。
解决方案4
11 2013-11-15 16:25:21
在 Chrome 中，这里的所有答案都不适合我。 GitHub 上的 AAverin 为此创建了一些有用的 Javascript，这对我有用：
只需将 js 添加到您的代码中并将类“splitForPrint”添加到您的表格中，它就会将表格整齐地拆分为多个页面并将表格标题添加到每个页面。
解决方案5
7 2009-11-19 14:26:00
使用这些 CSS 属性：
page-break-after
page-break-before
例如：
<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>
<body>
....
</body>
</html>
解决方案6
5 2015-06-30 15:25:53
我最近用一个很好的解决方案解决了这个问题。
CSS :
.avoidBreak {
border: 2px solid;
page-break-inside:avoid;
}
JS ：
function Print(){
$(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") });
$(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
window.print();
}
奇迹般有效！
解决方案7
3 2016-06-22 17:15:32
我最终遵循了@vicenteherrera 的方法，并进行了一些调整（可能是 Bootstrap 3 特有的）。
基本上; 我们不能破坏tr或td因为它们不是块级元素。 因此，我们嵌入div s转换每个，并应用我们的page-break-*规则对div 。 其次; 我们在每个 div 的顶部添加了一些填充，以补偿任何样式伪像。
<style>
@media print {
/* avoid cutting tr's in half */
th div, td div {
margin-top:-8px;
padding-top:8px;
page-break-inside:avoid;
}
}
</style>
<script>
$(document).ready(function(){
// Wrap each tr and td's content within a div
// (todo: add logic so we only do this when printing)
$("table tbody th, table tbody td").wrapInner("<div></div>");
})
</script>
边距和填充调整是必要的，以抵消引入的某种抖动（我的猜测 - 来自引导程序）。 我不确定我是否从这个问题的其他答案中提出了任何新的解决方案，但我认为这可能会对某人有所帮助。
解决方案8
1 2019-07-18 13:10:05
我遇到了同样的问题并到处寻找解决方案，最后，我找到了适用于每个浏览器的东西。
html {
height: 0;
}
使用这个 css 或者你可以使用这个 javascript 代替 css
$("html").height(0);
希望这对你也有用。
解决方案9
0 2015-07-28 23:58:08
我检查了许多解决方案，但没有人工作得很好。
所以我尝试了一个小技巧，它奏效了：
tfoot with style: position: fixed; bottom: 0px; position: fixed; bottom: 0px; 放置在最后一页的底部，但如果页脚太高，则会与表格内容重叠。
tfoot with only: display: table-footer-group; 不重叠，但不在最后一页的底部...
让我们放两个 tfoot：
TFOOT.placer { display: table-footer-group; height: 130px; } TFOOT.contenter { display: table-footer-group; position: fixed; bottom: 0px; height: 130px; }
<TFOOT class='placer'> <TR> <TD> <!-- empty here --> </TD> </TR> </TFOOT> <TFOOT class='contenter'> <TR> <TD> your long text or high image here </TD> </TR> </TFOOT>
第一个在非最后一页保留位置，第二个放在您的实际页脚中。
解决方案10
0 2022-09-26 04:21:38
我有这样的问题。 您可以使用 CSS 属性解决此问题。
@media print {
table{page-break-after: auto;}
}
注意：您不能将此属性用于空元素或绝对定位元素。
解决方案11
-2 2017-03-13 06:42:30
我已经尝试了上面给出的所有建议，并找到了针对此问题的简单且有效的跨浏览器解决方案。 此解决方案不需要样式或分页符。 对于解决方案，表格的格式应如下所示：
<table>
<thead> <!-- there should be <thead> tag-->
<td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>-->
</thead>
<tbody><!---<tbody>also must-->
<tr>
<td>data</td>
</tr>
<!--100 more rows-->
</tbody>
</table>
以上格式经过测试并在跨浏览器中工作
解决方案12
-3 2015-04-01 19:20:14
接受的答案在所有浏览器中都不适用于我，但遵循 css 对我有用：
tr
{
display: table-row-group;
page-break-inside:avoid;
page-break-after:auto;
}
html结构是：
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
...
</tbody>
</table>
就我而言， thead tr存在一些其他问题，但这解决了保持表格行不被破坏的原始问题。
由于标题问题，我最终得到了：
#theTable td *
{
page-break-inside:avoid;
}
这并没有阻止行中断； 只是每个单元格的内容。
解决方案13
-3 2017-07-06 07:41:53
伙计们......这里的大多数解决方案都不起作用。 所以这就是事情对我有用的方式..
HTML
<table>
<thead>
<tr>
<th style="border:none;height:26px;"></th>
<th style="border:none;height:26px;"></th>
.
.
</tr>
<tr>
<th style="border:1px solid black">ABC</th>
<th style="border:1px solid black">ABC</th>
.
.
<tr>
</thead>
<tbody>
//YOUR CODE
</tbody>
</table>
第一组头部用作虚拟头部，以便在分页时不会在第二个头部（即原始头部）中缺少顶部边框。
如何避免大型HTML表格中文字的分页符（打印/ PDF）？
[英]How to avoid page breaks (print / PDF) on text within large HTML table?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.