Quebras de Página CSS ao Renderizar PDF
IronPDF respeita as regras padrão de paginação CSS, então você controla onde uma página se divide adicionando as declarações certas ao seu HTML. Este exemplo força uma quebra de página após cada linha de tabela.
Solução
1. Adicione regras de impressão ao seu CSS
Envolva as regras de paginação em um bloco @media print e aplique uma quebra a cada <tr>. Tanto o legado page-break-after quanto o moderno break-after estão incluídos para compatibilidade, enquanto a linha de cabeçalho é deixada para fluir normalmente.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Page Break After Each Table Row</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #333;
padding: 8px;
}
/* PRINT RULES */
@media print {
tr {
page-break-after: always; /* legacy */
break-after: page; /* modern */
}
thead tr {
page-break-after: auto;
break-after: auto;
}
}
</style>
</head>
<body>
<h2>Page Break After Every Row</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item One</td>
<td>This row will appear on its own page.</td>
</tr>
<tr>
<td>2</td>
<td>Item Two</td>
<td>This row will also appear on its own page.</td>
</tr>
<tr>
<td>3</td>
<td>Item Three</td>
<td>Every row starts a new page.</td>
</tr>
</tbody>
</table>
</body>
</html>Quando renderizado, cada linha de corpo aterrissa em sua própria página, enquanto a linha thead mantém seu valor auto para que não acione uma quebra extra.
2. Impedir que uma linha se divida entre páginas
Se o seu objetivo é manter uma linha intacta em vez de forçar quebras entre linhas, elimine a quebra forçada e use page-break-inside: avoid em vez disso:
tr {
page-break-inside: avoid; /* Prevent row from splitting */
page-break-after: auto;
}page-break-inside: avoid informa ao renderizador para empurrar a linha inteira para a próxima página em vez de cortá-la ao meio, e o valor auto permite que a paginação natural decida onde a quebra acontece.
Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais bem estruturados e visualmente atraentes.
