Comment éviter le saut de page dans la ligne de la table pour wkhtmltopdf

Je génère un rapport pdf à partir d’une page HTML avec une seule table .

J’utilise wkhtmltopdf à cette fin.

Lorsque pdf est généré, il se casse n’importe où dans la balise tr .

Je veux l’éviter

Mise à jour 17.09.2015: Vérifiez la version que vous utilisez: wkhtmltopdf 0.12.2.4 est censé résoudre le problème (je n’ai pas coché) .


Ceci est un problème connu dans wkhtmltopdf. L’algorithme de saut de page utilisé par webkit (le WK dans WKhtmltopdf) ne fonctionne pas vraiment bien pour les grandes tables. Je suggère de diviser la table en morceaux plus petits qui sont plus faciles à diviser en pages et en utilisant beaucoup le css:

table, tr, td, th, tbody, thead, tfoot { page-break-inside: avoid !important; } 

Jetez également un coup d’oeil aux problèmes suivants de wkhtmltopdf, ils ont des commentaires intéressants qui traitent par exemple du problème de fractionnement de table. Il existe une solution JS qui divise par programme les tables en 168 qui peuvent vous aider (je ne les utilise pas).

Mise à jour 08.11.2013 Il y a beaucoup de discussions à ce sujet dans le numéro 168 lié ci-dessus. Quelqu’un a réussi à comstackr une version de wkhtmltopdf qui supporte mieux le bris de table, mais malheureusement, il semble que ce ne soit pas officiellement publié et qu’il puisse contenir d’autres bogues. Je ne sais pas comment l’obtenir et je ne sais pas comment comstackr sous Windows, mais toute personne intéressée peut vérifier par exemple le commentaire ici (voir la nouvelle mise à jour ci-dessous).

Mise à jour 24.02.2014 Vous serez ravi d’apprendre que dans wkhtmltopdf, 0,12 cette fonctionnalité, entre autres, a été grandement améliorée. Cependant, attendez 0.12.1 et testez bien avant de commencer à utiliser une nouvelle version, c’est quand même un peu instable bien que les nouveaux gars travaillant avec antialize fassent un super boulot (ashkulz rocks)! Restez à jour sur wkhtmltopdf.org et github . Le site de code Google est obsolète et migrer lentement.

C’est un ancien message, mais comme je perdais beaucoup de temps à essayer de trouver une solution appropriée, je le mettrais ici, peut-être que cela serait utile à quelqu’un.

Donc, d’après ce que j’ai lu, le problème avec

 page-break-inside: avoid 

c’est que ça ne marche pas. Mais en fait, si vous le définissez sur l’élément qui a un display:block il fonctionne comme prévu (comme noté quelque part dans SO). donc pour la structure simple de la table css avec

 td div, th div{ page-break-inside: avoid; } 

et structure de la table

  ....  .... 
some text
more text

travaillera comme prévu.

J’avais un cas un peu plus compliqué avec des lignes de lignes, donc la solution ci-dessus était de la casser en morceaux, ce qui n’était pas l’effet désiré. Je l’ai résolu en utilisant des divs pour chaque ensemble de lignes contenant des lignes. Mon jquery fait tout le travail:

 $(window).load(function () { var sizes = {}; $('#the_table tr:first th').each(function (a, td) { var w = $(td).width(); if (sizes.hasOwnProperty('' + a)) { if (sizes['' + a] < w) sizes['' + a] = w; } else { sizes['' + a] = w; } }); var tableClone = $('#the_table').clone(); $('#the_table').replaceWith('
'); var curentDivTable; var cDiv = $('.container'); tableClone.find('tr').each(function (i, ln) { var line = $(ln); if (line.hasClass('main_row')) { var div = $('
') currentDivTable = div.find('tbody'); cDiv.append(div); } currentDivTable.append(line); }); //optional - maybe in % its better than px var sum = 0; $.each(sizes, function (a, b) { sum += b; }); var widths = {}; $.each(sizes, function (a, b) { var p = Math.ceil(b * 100 / sum); widths['' + a] = p + '%'; }); //setup $('.container table').each(function (a, tbl) { $(tbl).find('tr:first td, tr:first th').each(function (b, td) { $(td).width(widths['' + b]); }); $(tbl).addClass('fixed'); }); });

css:

 div.new-section { page-break-inside: avoid; } .container, .new-section, .new-section table.fixed{ width: 100%; } .new-section table.fixed{ table-layout:fixed; } 

Je ne sais pas si tout est nécessaire et je ne pense pas que ce soit parfait, mais ça fait le travail. Testé sur chrome uniquement

Depuis la version 0.12, ce problème a été résolu, mais parfois, lorsqu’une table est trop longue pour tenir dans la page, wkhtmltopdf la décompose en deux parties et répète les en-têtes de colonne sur la nouvelle page.

J’ai trouvé une solution temporelle à ce problème dans la section sur les problèmes de github wkhtmltopdf: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2531

Ajoutez simplement ces lignes à votre vue css:

 tr { page-break-inside: avoid; } 

J’ai trouvé que wkhtmltopdf 0.12.2.1 et les versions ultérieures ont résolu ce problème.

Dans mon cas particulier, pour une raison quelconque, aucune des réponses précédentes n’a fonctionné pour moi. Ce qui a fini par fonctionner était en fait une combinaison de plusieurs choses.

  1. J’ai installé (dans Ubuntu 16.04) le wrapper Python Wkhtmltopdf appelé pdfkit en utilisant pip3, puis au lieu d’installer Wkhtmltopdf via apt-get, j’ai installé le fichier binary statique (version 0.12.3) en suivant le script ci-dessous

     #!/bin/sh sudo apt-get install -y openssl build-essential xorg libssl-dev wget http://download.gna.org/wkhtmltopdf/0.12/0.12.3/wkhtmltox-0.12.3_linux-generic-amd64.tar.xz tar -xJf wkhtmltox-0.12.3_linux-generic-amd64.tar.xz cd wkhtmltox sudo chown root:root bin/wkhtmltopdf sudo cp -r * /usr/ 
  2. Ajout de ce CSS (comme suggéré dans l’une des réponses ici):

     tr, td div, th div{ page-break-inside: avoid; } 
  3. Et puis ajoutez aussi les

    et

    comme suggéré ici (sans elles, la table se briserait encore):

     
    Column 1 Column 2
    Value 1 Value 2

Avec ces modifications, je peux maintenant utiliser avec succès les modèles Mako pour générer le code HTML, puis le transmettre à Wkhtmltopdf et obtenir un PDF magnifiquement paginé 🙂

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

Wkhtmltopdf 0.12.2.1: Mauvais

Wkhtmltopdf 0.12.3: Mauvais

Wkhtmltopdf 0.12.1: Bon

Ma solution était de passer à la version 0.12.1, ce qui a résolu mes problèmes. Certes, ils étaient peut-être en partie dus au fait de ne pas être super OCD sur mon HTML, mais comme le HTML est généré dans TinyMCE (par les utilisateurs), je n’ai pas vraiment le choix.

De plus, les tables nestedes ne fonctionnent dans aucune version pour moi.

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

Voici la solution que vous pouvez utiliser dans n’importe quel fichier HTML …

Après le démarrage, vous devez prendre une div dans le tr et donner ce css au div:

  

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

 
NameValue
urlstackoverflow.com
ip123.123.123.123

C’est le formatage correct d’une table, alors que la plupart des navigateurs s’en foutent, les convertisseurs comme celui que vous mentionnez peuvent vous suggérer, si vos

ou

manquantes, de les append en premier.

En plus de ce que dit Nanotelep, voici l’implémentation fonctionnelle de l’algorithme de saut de page de tableau manuel. https://github.com/AAverin/JSUtils/tree/master/wkhtmltopdfTableSplitHack

Les réponses ci-dessus n’ont pas fonctionné pour moi. J’ai dû désactiver spécifiquement l’option de zoom ma configuration pdfkit.

 PDFKit.configure do |config| config.default_options = { print_media_type: false, page_size: "A4", encoding: "UTF-8", ## Make sure the zoom option is not enabled! ## zoom: '1.3', disable_smart_shrinking: false, footer_right: "Page [page] of [toPage]" } end 

Pour ceux qui ont encore des problèmes avec ceci, une chose à retenir est que la table doit être un enfant direct du corps , sinon le css ne fonctionnera pas (du moins, c’est ce qui s’est passé avec moi).

J’ai trouvé cette solution ridicule, mais ça a très bien fonctionné pour moi 🙂

Je viens de mettre une très longue colonne rowspan comme ça

  

et puis la table ne se briserait pas.

Autre option: placez chaque tr dans son propre tbody , puis appliquez les règles de css de pause de tbody au tbody . Les tableaux prennent en charge plusieurs tbody .

Un peu de balisage supplémentaire, mais fonctionne convenablement pour moi.

J’étais confronté au même problème, après de nombreuses erreurs d’essai, ce problème a résolu le problème

tr { display: inline-table; }

J’ai creusé ces problèmes pendant des jours et j’ai finalement trouvé la solution parfaite. Vous pouvez référencer ce projet phpwkhtmltopdf . Regardez dans l’ article du répertoire et vous trouverez 3 solutions pour 3 problèmes. En bref, la solution ultime est d’append le style css

 thead { display: table-row-group; } tr { page-break-before: always; page-break-after: always; page-break-inside: avoid; } table { word-wrap: break-word; } table td { word-break: break-all; } 

Si vous êtes chinois, n’hésitez pas à consulter ce site 关于 wkhtmltopdf , 你 一定 想 这些 Découvrez l’essentiel si vous souhaitez avoir un aperçu de wkhtmltopdf

J’ai résolu le problème en combinant quelques solutions suggérées.

J’ai enveloppé ma table 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; } 

Lorsque vous avez terminé, la structure de la table a été définie comme suit:

 
header content

Je n’ai pas eu besoin de créer de div dans les balises td ou th.

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

  • Le corps doit être inclus dans le tableau
  • Le div doit avoir un affichage: block
  • Lorsqu’une table ne rentre pas dans une page, elle déplace automatiquement la table entière vers la page suivante (je n’ai pas essayé celle-ci avec des tables énormes)
  • Si vous ne supprimez que le sélecteur “.wrapping-div table” du CSS, cela permettra à la table de se diviser en deux pages, mais la restituera correctement, sans casser une cellule en deux pages (c’est comme le comportement par défaut sur Word). )

J’espère que ça aide.

J’ai eu beaucoup de mal avec le problème, en utilisant la dernière version de h4cc / wkhtmltopdf-amd64 0.12.4 et finalement je l’ai rendu fonctionnel en rétrogradant la version du package à 0.12.3 !