Ich habe eine Bootstrap 3-basierte Site. Der Ausdruck bestimmter Seiten ist für unsere Kunden wichtig. Der Großteil der Website wird mit Ausnahme der modalen Dialoge ordnungsgemäß gedruckt.
Ich versuche, die CSS-Druckemulation von Chrome (v42.0.2311.135 m) zu verwenden, um das Druck-Stylesheet zu verbessern. Es sieht jedoch nicht so aus wie Druckvorschau oder was tatsächlich aus dem Drucker kommt.
Ich möchte, dass die Druckversion der Modale den gesamten Bildschirm abdeckt. Folgendes habe ich bisher:
Bildschirm :
CSS-Emulation drucken (sieht gut aus, Modal nimmt den gesamten Bildschirm ein):
Druckvorschau / aktuelle Hardcopy (völlig falsch - modal ist klein und ich kann den Rest der Seite sehen):
Hier sind die relevanten Teile meines Druck-Stylesheets:
%Vor%Wie bekomme ich die Print CSS-Emulation so, dass sie der tatsächlich gedruckten Ausgabe ähnelt?
Das CSS-Medium: Drucken in der Emulation dient nur zum Anwenden von CSS-Regeln auf die Seite, es berücksichtigt nicht alle anderen Dinge, die mit dem Drucken zusammenhängen.
Zum Beispiel werden Bilder und Hintergrundfarben standardmäßig nicht gedruckt (weshalb der Hauptinhalt angezeigt wird, dass bg-color: white nicht angewendet wird). Andere Dinge können Probleme sein, wie absolute Positionierung. Die einzige zuverlässige Methode zum Testen von Druck ist das Drucken oder zumindest das Drucken in PDF.
Es ist auch erwähnenswert, dass es beim Drucken Unterschiede im Browser geben wird.
Tags und Links css printing google-chrome