Comment éviter le saut de page dans une ligne de tableau pour wkhtmltopdf ?

Question

Je génère un rapport en pdf à partir d'une page html avec une table .

J'utilise wkhtmltopdf à cette fin.

lorsque le pdf est généré, il ruptures n'importe où dans la balise tr .

Je veux l'éviter.

Answer 1

Pour éviter le saut de page, nous pouvons utiliser l'option css "page break avoid".

tr { page-break-inside: avoid; }

Casser tout contenu (Image/ Texte) et le faire apparaître dans le page suivante

.sample-image { page-break-before: always; }

Answer 2

Avez-vous une tête de table ? et un corps de table ?

<table>
<tbody>
<tr><th>Name</th><th>Value</th></tr>
<tr><td>url</td><td>stackoverflow.com</td></tr>
<tr><td>ip</td><td>123.123.123.123</td></tr>
</tbody>
</table>

C'est le formatage approprié d'un tableau, alors que la plupart des Navigateurs ne pouvait pas s'en soucier moins, convertisseurs comme celui que vous mentionnez peut, si votre manque <tbody> o <th> Je vous suggère d'essayer de les ajouter d'abord.

Answer 3

Ajoutez ce CSS avec les classes respectives

#main_div {
        position: relative;
        width: 672px; /* find your width in px based on the page margins */
    }
tr td {
        page-break-before: auto;
        page-break-inside: avoid !important;
    }

Mais le plus important est de donner à votre conteneur qui contient le tableau (ou un div parent) d'une largeur fixe en pixels . Cela devrait fonctionner pour la plupart des générateurs de pdf (WebKit) et leur permettre de calculer correctement les hauteurs.

Je peux confirmer que cela fonctionne pour moi avec wkhtmltopdf 0.12.6 (avec qt patché) sous kubuntu 20.04.

Answer 4

Je ne comprends pas pourquoi la version la plus correcte n'est pas encore là ;)

Si vous avez une mise en page fixe, il existe un moyen assez simple de le faire. Vous rendez la mise en page fixe ( table-layout: fixed au tableau), définissez les tailles avec la première ligne ou un colgroup :

      <colgroup>
        <col style="width: 5%">
        <col style="width: 35%">
        <col style="width: 20%">
        <col style="width: 20%">
        <col style="width: 20%">
      </colgroup>

et ensuite vous faites ça pour chaque table.

donc vous créez

    <table>
     <colgroup> [...] </colgroup>
     <tbody>
      <tr> [...] </tr>
     </tbody>
    </table>

Et comment éviter le saut de page maintenant ? C'est simple, vous ajoutez un <div class='page-breaker'> autour de chaque table avec le css

    .page-breaker {
      page-break-inside: avoid;
      page-break-before: avoid;
    }

Ainsi, chaque tableau a la même largeur de colonne et, si nécessaire, un tgroup obtient un saut de page avant.

Avec cette solution, le display : block ne casse pas le style du tableau.