web-dev-qa-db-fra.com

Wkhtmltopdf Caractères sur une seule ligne partiellement coupés entre les pages

Je travaille dans un projet utilisant Ruby on Rails (3.1). Mon exigence est de produire des pdf à partir du contenu html. J'utilise donc pdfkit gem.

Sur certaines pages, les caractères d'une seule ligne sont partiellement coupés entre les pages. Quand je convertis html, convertis en pdf en utilisant pdfkit gem

version de wkhtmltopdf: wkhtmltopdf - 0.11.0 rc1

système d'exploitation: Linux CentOS 5.5

Dans l'image ci-dessous, montrant le caractère partiellement coupé entre les pages.

S'il vous plaît suggérer une solution.

Exemple 1

enter image description here

Exemple 2

enter image description here

htmlruby-on-railsrubywkhtmltopdfpdfkit
38
amexn

Je viens de découvrir cela et de trouver quelque chose qui résolve le problème pour moi. Dans mon cas particulier, il y avait des divs avec display: inline-block; margin-bottom: -20px;. Une fois que je les ai modifiés pour bloquer et réinitialiser le bas de la marge, le fractionnement de ligne a disparu. YMMV.

11
nvahalik

Selon une documentation que j'ai trouvée (voir Saut de page), il s'agit d'un problème connu qui suggère d'utiliser des sauts de page CSS pour insérer des sauts de page (en supposant que vous utilisez une version corrigée de QT):

L'algorithme actuel de rupture de page de WebKit laisse beaucoup à désirer . En gros, webkit convertit tout en une seule page, , Puis le découpe en pages. Cela signifie que si vous avez deux colonnes De texte, l'une d'entre elles est décalée verticalement d'une demi-ligne. Ensuite, webkit Coupera une ligne en plusieurs parties pour afficher la moitié supérieure sur une page. Et La moitié inférieure sur une autre page. Cela cassera également l’image en deux et Et ainsi de suite. Si vous utilisez la version corrigée de QT, vous pouvez utiliser la propriété CSS Page-break-inside pour remédier à cela un peu. Il n’ya pas de solution Facile à ce problème. Essayez de classer vos documents HTML De manière à ce qu’ils contiennent de nombreuses lignes sur lesquelles les pages peuvent être Coupées proprement.

Voir aussi: http://code.google.com/p/wkhtmltopdf/issues/detail?id=9 , http://code.google.com/p/wkhtmltopdf/ issues/detail? id = 33 et http://code.google.com/p/wkhtmltopdf/issues/detail?id=57 .

9
Peter Brown

J'ai eu ce problème avec une table:

enter image description here

Ensuite, j'ai ajouté ceci à mon CSS:

table, img, blockquote {page-break-inside: avoid;}

Cela a résolu le problème:

enter image description here

7
Besi

Dans mon cas, le problème a été résolu en commentant les css suivants:

html, body {
  overflow-x: hidden;
}

En règle générale, vérifiez si les balises ont overflow défini sur hidden et supprimez-le ou définissez-le sur visible. 

Btw, j'utilise wkhtmltopdf version 0.12.2.1 sur Windows 8. 

2
Pedro M Duarte

Le problème du texte coupé est un problème connu du Webkit et il semble que les développeurs ont trouvé une solution dans wkhtmltopdf. La mise à jour à 0.12.1 résoudra le problème du texte coupé (si vous ne voulez pas perdre de temps avec les compilations, vous pouvez simplement prendre le fichier binaire à partir d'ici: https://github.com/h4cc/wkhtmltopdf-AMD64 ).

0
Dragos Rusu

J'ai parcouru Internet pendant quelques semaines pour tenter de surmonter ce problème. Aucune des solutions que j'ai trouvées n'a fonctionné pour moi, mais quelque chose d'autre a fonctionné.

J'avais une mise en page à deux colonnes où le texte était coupé au milieu du texte. Dans l'état brisé, ma structure de base ressemblait à ceci:

@media print {
  * {
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
  }
}
.col-9{
  display: inline-block;
  width: 70%;
}
.col-9{
  display: inline-block;
  width: 25%;
}

<div class="col-9">
  [a lot of text here, that would spill over multiple pages]
</div>
<div class="col-3">
  [a short sidebar here]
</div>

Je l'ai corrigé en le changeant en:

@media print {
  * {
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
  }
}

.col-9{
  display: block;
  float: left;
  width: 70%;
}
.col-9{
  display: block;
  float: left;
  width: 25%;
}
.clear{
  clear: both;
}

<div class="col-9">
  [a lot of text here, that no longer split mid-line.]
</div>
<div class="col-3">
  [a short sidebar here]
</div>
<div class="clear"></div>

Pour une raison quelconque, l'outil n'a pas pu gérer l'affichage: configuration inline-block. Cela fonctionne avec des flotteurs. J'utilise la version 0.12.4.

0
Mike Caputo