我需要使用 puppeteer 呈现发票 PDF，其中包含一个包含元素的表格。这些元素可以包含描述/评论/等。 表格溢出到它下面的下一个 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>
最佳答案
像这样尝试:
.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... */
}
关于html - 打破 PDF 中的 html 表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64515193/