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

J'ai essayé toutes sortes de manipulations de mes tableaux, mais rien n'a pu empêcher les sauts de page d'être placés au milieu d'une ligne. En désespoir de cause, j'ai essayé différentes versions, et j'ai trouvé ce qui suit :

Wkhtmltopdf 0.12.2.1 : Mauvais

Wkhtmltopdf 0.12.3 : Mauvais

Wkhtmltopdf 0.12.1 : Bon

Ma solution a été de passer à la version 0.12.1, ce qui a résolu mes problèmes. Il est vrai qu'ils étaient peut-être en partie dus au fait que je n'étais pas très regardant sur mon html, mais comme le HTML est généré dans TinyMCE (par les utilisateurs), je n'ai pas vraiment le choix.

De même, les tableaux imbriqués ne fonctionnent dans aucune version pour moi.

Answer 2

J'étais confronté au même problème et après de nombreux essais et erreurs, ce css a résolu le problème.

tr {
    display: inline-table;
}

Answer 3

Comment utiliser les sauts de page dans un pdf sans casser une tr ?

Voici une solution que vous pouvez utiliser dans n'importe quel fichier html.....

Après avoir commencé votre tr, vous devez prendre un div à l'intérieur du tr et donner cette css au div :

<tr>
      <div style="page-break-inside:avoid !important; page-break-after:auto !important; overflow: hidden; display:block !important; width:100% ">
     </tr>

Answer 4

J'ai résolu le problème en combinant certaines des solutions proposées.

J'ai enveloppé mon tableau dans un div et défini le CSS suivant.

.wrapping-div {
        display: block;
        page-break-inside: avoid !important;
    }

.wrapping-div table, .wrapping-div tbody, .wrapping-div tr, .wrapping-div td, .wrapping-div th {
        page-break-inside: avoid !important;
    }

La structure de la table une fois terminée a été définie comme l'exemple suivant :

<div class="wrapping-div">
 <table>
  <tbody>
   <tr>
    <th>
      header
    </th>
    <td>
      content
    </td>
   </tr>
  </tbody>
 </table>
</div>

Je n'ai pas eu besoin de créer de div à l'intérieur des balises td ou th.

Des choses importantes que j'ai remarquées en essayant de résoudre le problème :

• Le tbody doit être inclus dans le tableau
• Le div doit avoir display : block
• Lorsqu'un tableau ne tient pas dans une page, il déplace automatiquement l'ensemble du tableau vers la page suivante (je n'ai pas encore essayé cette fonction avec les tableaux volumineux).
• Si vous ne supprimez que le ".wrapping-div table" du sélecteur CSS, cela permettra de diviser le tableau en deux pages, mais le rendra correctement, en ne cassant pas une cellule en deux pages (c'est comme le comportement par défaut de Word).

J'espère que cela vous aidera.

Answer 5

En complément de ce que dit Nanotelep, voici l'implémentation fonctionnelle de l'algorithme de rupture de page de la table manuelle. https://github.com/AAverin/JSUtils/tree/master/wkhtmltopdfTableSplitHack