Przerwy stron CSS podczas renderowania PDF
IronPDF honoruje standardowe zasady paginacji CSS, więc kontrolujesz, gdzie strona się dzieli, dodając odpowiednie deklaracje do swojego HTML. Ten przykład wymusza przerwę strony po każdym wierszu tabeli.
Rozwiązanie
1. Dodaj zasady druku do swojego CSS
Otocz zasady paginacji blokiem @media print i zastosuj przerwę do każdego <tr>. Zarówno starszy page-break-after jak i nowoczesny break-after są uwzględnione dla zgodności, podczas gdy wiersz nagłówka przepływa normalnie.
<!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>Podczas renderowania, każdy wiersz ciała kończy się na swojej stronie, podczas gdy wiersz thead zachowuje swoją wartość auto, aby nie wywołać dodatkowej przerwy.
Renderowany PDF pokazujący każdy wiersz tabeli na swojej stronie
2. Zapobiec podziałowi wiersza na strony
Jeśli Twoim celem jest utrzymanie wiersza w całości, zamiast wymuszania przerw między wierszami, usuń przymusową przerwę i użyj page-break-inside: avoid zamiast tego:
tr {
page-break-inside: avoid; /* Prevent row from splitting */
page-break-after: auto;
}page-break-inside: avoid mówi rendererowi, aby przenieść cały wiersz na następną stronę zamiast go przecinać, a wartość auto pozwala naturalnej paginacji zdecydować, gdzie padowa przypadka.
Curtis Chau posiada tytuł licencjata z informatyki (Uniwersytet Carleton) i specjalizuje się w front-endowym rozwoju, z ekspertką w Node.js, TypeScript, JavaScript i React. Pasjonuje się tworzeniem intuicyjnych i estetycznie przyjemnych interfejsów użytkownika, Curtis cieszy się pracą z nowoczesnymi frameworkami i tworzeniem dobrze zorganizowanych, atrakcyjnych wizualnie podręczników.
