打破PDF中的html表格答案

【问题标题】：Break html table in PDF打破PDF中的html表格
【发布时间】：2021-02-07 09:58:12
【问题描述】：

我需要使用 puppeteer 呈现发票 PDF，其中包含一个包含项目的表格。这些项目可以包含描述/cmets/等。表格溢出到它下面的下一个 div 上。如果它溢出，行为应该进入下一页。

我尝试了很多 css break-* 和 @page 都没有运气，最大高度，但是表格并没有完全可见，还有很多其他的东西。我应该跳槽而只使用 div 吗？

.pdf {
  background-color: #FFF;
  overflow: hidden !important;
  display: grid;
  grid-template-rows: 190px minmax(10px, 246px) 786px 212px 1fr;
  grid-row-gap: 1em;
}

.table-container {
  table { page-break-inside: auto }
  tr    { page-break-inside: avoid; page-break-after: auto }
  thead { display: table-header-group }
  tfoot { display: table-footer-group }
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

// ... other elms ...

<div class="pdf">
    <header>
        ... company header logo and other details ...
    </header>
    <div class="details">
        ... invoice details ...
    </div>
    <div class="table-container">
        <table>
            <thead>
            <tr>
                <th class="text-left">PRODUCT</th>
                <th class="text-left">DESCRIPTION</th>
                <th class="text-right">PRICE</th>
                <th class="text-right">UNIT</th>
                <th class="text-right">QUANTITY</th>
                <th class="text-right">TOTAL</th>
            </tr>
            </thead>
            <tbody>
                <tr></tr>
            </tbody>
        </table>
    </div>
    <div class="details">
        this div gets overflowed
    </div>
</div>

【问题讨论】：

你试过pdfmake.org吗？
很遗憾我无法更改当前系统。
可能有点牵强，但this answer 解决了针对不同页面自动破坏表格的问题。
这是一个很好的线索。我会试试看！谢谢@Chiel

标签： html css pdf

【解决方案1】：

试试这样：

.pdf {
  background-color: #FFF;
  overflow: hidden !important;
  display: grid;
  grid-template-rows: 190px minmax(10px, 246px) auto 212px 1fr;
  grid-row-gap: 1em;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  min-height: 786px;
}

@media print {
  .table-container table {
      page-break-inside: auto;
  }
  .table-container tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  .table-container thead {
    display: table-header-group;
  }
  .table-container tfoot {
    display: table-footer-group;
  }
}

<div class="pdf">
  <header>
    ... company header logo and other details ...
  </header>
  <div class="details">
    ... invoice details ...
  </div>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th class="text-left">PRODUCT</th>
          <th class="text-left">DESCRIPTION</th>
          <th class="text-right">PRICE</th>
          <th class="text-right">UNIT</th>
          <th class="text-right">QUANTITY</th>
          <th class="text-right">TOTAL</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
          <td>test</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="details">
    this div gets overflowed
  </div>
</div>

将grid-template-rows 中的第三个值更改为auto 允许第三行(.table-container) 的高度大于786px。这样就解决了溢出问题。

似乎grid layout 也弄乱了表格，导致thead 元素在每个重复页面的开头重复tbody 内容。如果是我，我会删除 display: grid、grid-template-rows 和 grid-row-gap 规则，至少用于打印，而不是像下面这样。这样会更不容易出错。

@media print {
   .pdf {
      display: block;
      grid-template-rows: none;
      grid-row-gap: 0;
   }

   .pdf > div {
      margin-bottom: 1em;
   }

   header {
      height: 190px;
   }

   header + .details {
      height: 246px;
      min-height: 10px;
      max-height: 246px;
   }

   .table-container {
      height: auto;
   }

   .table-container + .details {
      height: 212px;
   }

   /* further rules here... */
}

【讨论】：

网格实际上是视图的样子。桌子必须有固定的高度。如果项目超过这个高度，它应该溢出到下一页。
好的，但是当它确实有一个固定的高度时，它会溢出到后面的div。因此，在这种情况下，您需要从表格中删除内容（或使其更小或隐藏）以使其符合您的固定高度约束，或者您需要删除固定高度约束以便可以显示表格。它们并不真正兼容。
我已经更新了这个答案以在桌子上使用min-height，这样它就可以具有固定的高度并根据需要增长，同时仍然通过不使用网格布局来避免其他问题。如果您尝试一下答案中的代码，您应该会发现它的外观没有改变。