Question

我正在尝试使用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>

我已经尝试

我尝试将page-break-inside: avoid !important设置在<thead>，<tr>，<th>内，但是它不起作用。
我试图用<thead>将<div>包裹起来，并将page-break-inside: avoid !important赋予div，但仍然无法正常工作。

我不知道该怎么做。有什么帮助吗？

更新

我愿意回答与普通javascript一起解决此问题的问题。我在想，我可以尝试检测<thead>的位置，然后检查<thead>是否靠近页面底部（精确距离）？如果符合条件，它将仅向该表中添加样式page-break-before-true？

Answer 1

尝试将每一列的宽度限制为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>

Answer 2

您尝试过吗：

<thead style="page-break-before">

这将确保每个标题都在新页面上，并且如果每个表中只有一个标题，则应该可以使用。

此解决方案的唯一问题是，无论表的大小如何，每页上都会有一个新的表。但是，它将阻止标题破损。

或者，还有This Article，它进一步描述了您可以采取什么措施来阻止破坏表的页面中断。

避免在行距不起作用的页眉表内进行分页（打印）

2 个答案: