避免在行跨度不起作用的标题表中出现分页符（打印）
Posted
技术标签:
【中文标题】避免在行跨度不起作用的标题表中出现分页符（打印）【英文标题】：Avoid page break inside in header table with rowspan not working (printing) 【发布时间】：2020-01-02 11:42:55 【问题描述】：我正在尝试使用 Puppeteer chrome 生成 pdf。
pdf 中的数据是动态的。
pdf 包含我通过循环数据生成的多个表。
因此，有两个循环，循环表和循环每个表内的数据 (<td>)。
表的标题 - 在<thead> 内 - 有rowspan。不幸的是，<thead> 并没有像我预期的那样坏。
这是目前的情况：
预期结果
我希望<thead> 不会中断。
如果<thead> 不适合，则应转到下一页。
我使用车把创建了模板。
这是模板的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
html,
body
min-height: 150mm !important;
max-width: 297mm !important;
@page
size: auto;
</style>
</head>
<body>
<div>
#each array as |data|
<table>
<thead style="page-break-inside: avoid !important">
<tr>
<th rowspan="2">
One
</th>
<th rowspan="2">
Two
</th>
<th colspan="2">
Three
</th>
<th rowspan="2">
Four
</th>
<th rowspan="2">
Five
</th>
<th colspan="2">
Six
</th>
<th colspan="2">
Seven
</th>
</tr>
<tr>
<th>
Three child 1
</th>
<th>
Three child 2
</th>
<th>
Six child 1
</th>
<th>
Six child 2
</th>
<th>
Seven child 1
</th>
<th>
Seven child 2
</th>
</tr>
</thead>
<tbody>
#each data.innerArray as |innerData|
<tr>
<td>
innerData.one
</td>
<td>
innerData.two
</td>
<td>
innerData.three.one
</td>
<td>
innerData.three.two
</td>
<td>
innerData.four
</td>
<td>
innerData.five
</td>
<td>
innerData.six.one
</td>
<td>
innerData.six.two
</td>
<td>
innerData.seven.one
</td>
<td>
innerData.seven.two
</td>
</tr>
/each
</tbody>
</table>
/each
</div>
</body>
</html>
我试过了
-
我尝试在
<thead>、<tr>、<th> 中设置page-break-inside: avoid !important，但它不起作用。
我尝试用<div> 包装<thead> 并将page-break-inside: avoid !important 提供给div，但仍然无法正常工作。
我不知道如何使它工作。请帮忙？
更新
我愿意接受与纯 javascript 混合来解决此问题的答案。我在想，我可以尝试检测<thead> 的位置，然后检查<thead> 是否靠近（精确距离）页面底部？如果它匹配条件，它只会在该表中添加样式 page-break-before true ？
【问题讨论】：
我想知道你是否可以让它在像 Firefox 这样的东西中工作，看看你的方法是否应该工作？我有一个应用程序必须避免进入尝试将每列的宽度限制为style="width: <somevalue>%;"，它应该满足 100%，如下面的代码。根据您在每列中维护的内容量更改 % 值并拆分为列。
示例代码：
<tr>
<th rowspan="2" style="width: 10%;">
One
</th>
<th rowspan="2" style="width: 20%;">
Two
</th>
<th colspan="2" style="width: 20%;">
Three
</th>
<th rowspan="2" style="width: 5%;">
Four
</th>
<th rowspan="2" style="width: 5%;">
Five
</th>
<th colspan="2" style="width: 20%;">
Six
</th>
<th colspan="2" style="width: 20%;">
Seven
</th>
</tr>
【讨论】：
那不行。感谢您的回复。但我仍然面临同样的问题【参考方案2】：你试过了吗：
<thead style="page-break-before">
这将确保每个标题都在一个新页面上，并且如果每个表格只有一个标题，则应该可以工作。
此解决方案的唯一问题是，无论表格有多大/多小，每个页面上都会有一个新表格。但是，它会阻止标题中断。
另外还有This Article，它进一步描述了您可以采取哪些措施来阻止分页破坏表格。
【讨论】：
对不起，但正如您所说，每个新表都会放入一个新页面。这不是我所期望的。我读过你提到的那篇文章。我尝试将<div> 包裹两个<tr> 或将<thead> 包裹<div> 并赋予样式page-break-inside: avoid。但它不起作用。
您能尝试用page-break-inside: avoid!important 将整个表格包装在<div> 中吗？由于我没有 chrome 扩展，我无法复制您的 PDF。但是，page-break-inside 阻止它内部的元素破坏，所以我想知道它是否将h1 归类为元素。而如果元素是表格本身，则应避免破坏它。以上是关于避免在行跨度不起作用的标题表中出现分页符（打印）的主要内容，如果未能解决你的问题，请参考以下文章