Warum funktioniert PDFKit nicht gut mit Margen?

Obwohl ich einfach nicht die Notwendigkeit habe, etwas normal zu fragen (das Internet ist nur eine Goldmine, vor allem diese Seite), bringt mich das auf die Probe, da ich zwei Tage lang versucht habe, das funktioniert zu haben und ich nicht finde etwas nützliches. Link für ähnliche Post würde bedankt, wenn gegründet, wie ich nicht gefunden habe. Lass uns anfangen. Warum funktioniert PDFKit nicht gut mit Margen?

Ich benutze PDFKit mit Python 2.7 und Django 1.9, um etwas HTML zu PDF zu erzeugen. Einfache Arbeit. Der HTML-Code sieht wie folgt aus:

{ 
    "page-width": "229mm", 
    "page-height": "162mm", 
    "paper-size": "CE5", 
    "encoding": "utf-8" 
}

In beiden Fällen ich keine Ränder oder Polsterungen einfach nicht hinzufügen:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <style type="text/css"> 
    * { 
     /* Box-model */ 
     margin: 0; 
     padding: 0; 
    } 

    .wrapper { 
     /* Box-model */ 
     width: 229mm; 
     height: 161mm; 
    } 
    </style> 
</head> 
<body> 
    {% for someone in people %} 
    <div class="wrapper"> 
    <p><strong>{{ someone.complete_name }}</strong></p> 
    <p>{{ someone.bio }}</p> 
    </div> 
    {% endfor %} 
</body> 
</html>

Meine PDFKit Optionen wie folgt aussieht. Ich erzeuge das PDF, und sieht gut aus (keine Überraschungen, alles geht dahin, wo es hingehört). Aber wenn ich einen Rand/Padding im HTML und/oder Optionen hinzufüge, bekomme ich nur einen fortlaufenden wiederholten inkrementellen Rand, wenn das PDF erzeugt wird (um ein Beispiel zu geben, auf 50 Seiten hat der erste keinen Rand und der 50. hat einen Spielraum von etwa zwei Fingern mehr oder weniger). Ich habe verschiedene Kombinationen von Rändern, Paddings und Höhen und nichts ausprobiert: Wenn ich nur Ränder oder Paddings hinzufüge, wird das PDF verrückt.

(Anmerkung: ja, Seite Höhe ist 1 mm größer als Höhe in HTML, aber das benötigt wird, um die Hülle in der PDF-Seite paßt).

Wer hatte dieses Problem schon einmal? Danke im Voraus.

Quelle

2017-02-06 RompePC

Ok, ich es endlich geschafft, zu verstehen, was geschah:

Lassen Sie uns sagen, dass ich ein Papierformat A4 drucken möchten (Sie haben eine Liste here). Also, übersetzt es in px (weil es einfacher cm oder mm anstatt Pixel manuell zu setzen), haben wir das . Wir setzen unser CSS height: Xmm. Einfach.

Das Problem wird, wenn PDFKit, dass es WebKit verwendet von dem, was ich weiß, HTML macht: WebKit hat nur 3 Dezimalgenauigkeit Punktwert, so dass unser 3,779528 Pass 3,779 sein (es abrundet auf, wenn ich erinnere dich), das ist nicht die wahre Größe. Das bedeutet, dass das Hinzufügen einer beliebigen Art von Rand/Polsterung/Positionierung Dinge bricht und magische Abstände erzeugt, da die Längen nicht korrekt sind (selbst wenn Sie dieselbe Maßeinheit für diese verwenden).

Die gute Nachricht ist, dass das Einstellen von Margin/Padding/Positionierung nichts kaputt macht, also wird es in einigen Sachen gut genug sein.

Aber was, wenn Sie Ränder oder etwas ähnliches hinzufügen müssen? CSS page-break Eigenschaften (die verknüpfte ist page-break-after) kommt zur Rettung. Es stellt sicher, dass beim Drucken des HTML-Codes kein magischer Abstand eingestellt wird (via Render, via Webbrowser).

dass unter Berücksichtigung, sei ein Beispiel sein:

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
    * { 
     /* Box-model */ 
     /* To ensure no unexpected magic spacing */ 
     margin: 0; 
     padding: 0; 
    } 

    .wrapper { 
     /* Box-model */ 
     width: 197mm; /* + 100 from horizontal padding = 297 */ 
     height: 160mm; /* + 50 from vertical padding = 210 */ 
     padding: 25mm 50mm; 
    } 

    /* The selector applies the page break after, so we have to exclude the last wrapper */ 
    .wrapper:not(:last-of-type) { 
     /* Box-model */ 
     page-break-after: always; 
    } 
    </style> 
</head> 
<body> 
    {% for someone in people %} 
    <div class="wrapper"> 
    <p><strong>{{ someone.complete_name }}</strong></p> 
    <p>{{ someone.bio }}</p> 
    </div> 
    {% endfor %} 
</body> 
</html>

Und voila, haben Sie eine perfekt ausgestattete Vorlage für PDF-Daten zu machen, ohne Magie Abstand. Sie müssen nur sicherstellen, dass das Element, das Sie zum "Darstellen" einer Seite verwenden (wrapper in diesem Beispiel), dieselben Abmessungen wie die Seiten aufweist.

Quelle

2017-02-20 08:29:32 RompePC

Warum funktioniert PDFKit nicht gut mit Margen?

Antwort

Verwandte Themen