Gerendertes PDF sieht in der Produktion anders aus - Rails, PDFKit, wkhtmltopdf
Ich verwende Rails pdfkit , um mehrseitige PDF-Dateien zu rendern. Die gerenderte PDF-Datei nimmt den CSS (SCSS) -Stil und die Seitenumbrüche wie erwartet auf. Wenn ich jedoch versuche, dasselbe PDF-Dokument in der Produktion zu rendern, scheint es, als ob der Stil nur einige CSS-Regeln lädt und andere wie die Deklarationen width und height des übergeordneten Containers ignoriert. Hier ist mein CSS (SCSS) für das übergeordnete Containerelement:
und PDFKit Initialisierer:
%Vor% Hier ist ein Beispiel für eine PDF-Datei, die in Entwicklung gerendert wurde:
und so sieht dieses PDF in Produktion aus:
Die rote Linie um das Dokument ist eine CSS-Regel, die ich eingeführt habe, um anzuzeigen, wie Seitenränder in der Produktion gerendert werden.
Umgebungen
Sowohl Entwicklung als auch Produktion (Digital Ocean Droplet) verwenden dieselbe Version von Ubutnu (16.04).
Was hast du probiert?
-
Zuerst dachte ich, dass einige der CSS-Klassen, die ich für
pdf-kitverwende, wie zB.page, bei der Kompilierung durch einige widersprüchliche Regeln überschrieben werden. Daher habe ich versucht, eindeutige Klassennamen wie.pdf-pagezu verwenden von.page. -
Ich habe dann versucht zu sehen, ob es mit der SCSS-Kompilierung zusammenhängen kann. Verschachtelte Rand- und Hintergrundfarbdeklarationen innerhalb desselben Stylesheets werden jedoch "abgeholt" und gerendert. Der
policy-pdf-Block in der kompiliertenapplication.csssieht ebenfalls korrekt aus. -
Durch das Deaktivieren von
smart-shrinkingwurde die PDF-Datei noch mehr "zerbröselt". -
CSS-Regeln für Größe / Breite (inline und über externes Stylesheet) auf das
html-Tag anwenden, wie in diese Post:
Hinweis:
Beide, Produktion und Entwicklung, haben die gleiche Version von wkhtmltopdf von ( ~> 0.12.2 ). Wenn Sie jedoch wkhtmltopdf -V ausführen, wird wkhtmltopdf 0.12.2.1 (with patched qt)
2 Antworten
Die Produktionsausgabe scheint größere Ränder zu haben als die Ausgabe des Dev.
Aus Ihrem gegebenen Beispiel der relevanten css, die Ihre "Seitenkonfiguration" zeigt, kann dies einfach durch Angabe dieser Ränder behoben werden. Dies geschieht nicht auf dem virtuellen Seitenelement .pdf-page , sondern innerhalb der @page Wahlschalter.
@page {
margin:10mm 15mm 10mm 15mm;
}
Je nachdem, wie dieses Design entwickelt und in der Vorschau angezeigt wird (Druckdialog, Medienemulation für Entwicklungstools), müssen Sie diese Ränder möglicherweise anpassen, damit sie den für die Vorschau der Arbeit verwendeten Rändern entsprechen. Dies kann im Chrome-Druckdialog erfolgen, indem Sie Ziel auf "Als PDF speichern" setzen, "Weitere Einstellungen" erweitern, "Angepasst" innerhalb der Ränder auswählen und schließlich die Werte eingeben oder die Ränder direkt über die Druckvorschau ziehen / p>
Obwohl ich mit PDFKit nicht vertraut bin, habe ich entwickelte Vorlagen für AthenaPDF, ich nehme an, sie sind alle so ziemlich Standard-PDF-Konverter mit Headless Chrome unter der Haube. Wir fanden es einfacher und flexibler, die @ page-Eigenschaften über css zu definieren, anstatt sie über den AthenaPDF-Andockdienst zu konfigurieren. Es wurden nur Standardwerte, minimale und keine Margenwerte verwendet .
Tags und Links css ruby-on-rails pdf pdfkit wkhtmltopdf