webentwicklung-frage-antwort-db.com.de

Wkhtmltopdf Zeichen in einer Zeile, die teilweise zwischen den Seiten geschnitten werden

Ich arbeite in einem Projekt mit Ruby on Rails (3.1). Meine Anforderung ist es, PDF aus dem HTML-Inhalt zu erstellen. Also benutze ich pdfkit gem.

Auf einigen Seiten werden Zeichen in einer Zeile teilweise zwischen Seiten geschnitten. Wenn ich HTML konvertiere, konvertiere ich mit pdfkit gem in pdf

version von wkhtmltopdf: wkhtmltopdf - 0.11.0 rc1

betriebssystem: Linux CentOS 5.5

In der Abbildung unten ist das Zeichen teilweise zwischen den Seiten dargestellt.

Bitte schlagen Sie eine Lösung vor.

Beispiel 1

enter image description here

Beispiel 2

enter image description here

38
amexn

Ich bin gerade darüber gestoßen und habe etwas gefunden, das das Problem für mich gelöst hat. In meinem speziellen Fall gab es divs mit display: inline-block; margin-bottom: -20px;. Nachdem ich sie geändert hatte, um den unteren Rand zu blockieren und zurückzusetzen, verschwand die Linienaufteilung. YMMV.

11
nvahalik

Gemäß einiger Dokumentation fand ich (siehe Seitenumbruch), dass dies ein bekanntes Problem ist und die Verwendung von CSS-Seitenumbrüchen zum Einfügen von Seitenumbrüchen vorschlägt (vorausgesetzt, Sie verwenden eine gepatchte Version von QT):

Der aktuelle Seitenumbruch-Algorithmus von WebKit lässt viel zu wünschen übrig. Grundsätzlich rendert das Webkit alles in eine lange Seite Und schneidet es dann in Seiten auf. Das bedeutet, wenn Sie zwei Spalten Von Text haben, von denen eine vertikal um eine halbe Zeile verschoben ist. Dann schneidet das Webkit Eine Linie in Stücke, wobei die obere Hälfte auf einer Seite angezeigt wird. Und Die untere Hälfte auf einer anderen Seite. Es wird auch das Bild in zwei Teile zerlegen und So weiter. Wenn Sie die gepatchte Version von QT verwenden, können Sie die CSS-Funktion Page-break-inside verwenden, um dies zu beheben. Es gibt keine einfache Lösung für dieses Problem. Versuchen Sie, Ihre HTML-Dokumente so zu organisieren, dass sie viele Zeilen enthalten, in denen Seiten sauber geschnitten werden können.

Siehe auch: http://code.google.com/p/wkhtmltopdf/issues/detail?id=9 , http://code.google.com/p/wkhtmltopdf/ issues/detail? id = 33 und http://code.google.com/p/wkhtmltopdf/issues/detail?id=57 .

9
Peter Brown

Ich hatte dieses Problem mit einem Tisch:

enter image description here

Dann habe ich folgendes zu meinem CSS hinzugefügt:

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

Das Problem wurde behoben:

enter image description here

7
Besi

In meinem Fall wurde das Problem durch Auskommentieren der folgenden CSS gelöst:

html, body {
  overflow-x: hidden;
} 

Überprüfen Sie im Allgemeinen, ob für Tags overflow als hidden festgelegt wurde, und entfernen Sie sie oder setzen Sie sie auf visible

Übrigens, ich benutze wkhtmltopdf version 0.12.2.1 unter Windows 8. 

2
Pedro M Duarte

Das Problem mit dem ausgeschnittenen Text ist ein bekanntes Webkit-Problem, und es scheint, als hätten die Entwickler in wkhtmltopdf eine Lösung gefunden. Das Aktualisieren auf 0.12.1 behebt das Textproblem. Wenn Sie keine Zeit mit Kompilierungen verschwenden möchten, können Sie die Binärdatei hier abrufen: https://github.com/h4cc/wkhtmltopdf-AMD64 ).

0
Dragos Rusu

Ich habe ein paar Wochen im Internet gesucht und versucht, dieses Problem zu lösen. Keine der Lösungen, die ich gefunden habe, funktionierte für mich, aber etwas anderes.

Ich hatte ein zweispaltiges Layout, bei dem der Text mitten im Text abgeschnitten wurde. Im kaputten Zustand sah meine Grundstruktur so aus:

@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>

Ich habe es behoben, indem ich es geändert habe:

@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>

Aus irgendeinem Grund konnte das Tool die Anzeige nicht verarbeiten: Inline-Block-Setup. Es funktioniert mit Schwimmern. Ich verwende Version 0.12.4.

0
Mike Caputo