Samt Druck CSS als Bildschirm

Es scheint, wie es wirklich eine einfache Lösung für dieses Problem sein soll, aber bisher habe ich nicht erfolgreich gewesen ein zu finden.Samt Druck CSS als Bildschirm

Ich verwende ZURB Foundation, und ich bin im Grunde eine Live-Form zu schaffen, die Eingaben von einer Form (oben) und füllt in einem Gehalt (unten) unter Verwendung von Angularjs nimmt. Die Benutzer drucken dann die Seite als PDF. Ich möchte das Layout beibehalten, das ich für den Inhalt unten habe, und ich möchte das obige Formular beim Drucken ausblenden. Zurb hat eine feine "hide-for-print" -Css-Regel, die anscheinend gut funktioniert, wenn sie auf das obige Formular angewendet wird, aber wenn ich Druck-Stylesheets umschalte, streift sie im Grunde alle CSS ab und geht zurück zu hässlich.

Vorschläge?

Quelle

2013-03-28 ecirish

Haben Sie versucht, Medien CSS-Abfragen für print Medien? Jetzt

.foo { 
    height:150px; 
    width:150px; 
    background-color:#F00 // see what I did there? 
} 

.bar { 
    height:10px; 
    width:50%; 
    border-radius:5px; 
    background-color:#000 
} 

.baz { 
    width:100px; 
    height:150px; 
    background-color:#FFF; 
} 

@media screen { 
    .baz { 
     display:block; 
    } 
} 

@media print { 
    .baz { 
     display:none; 
    } 
}

, nur einige .baz ‚s Eigenschaften werden durch die Medienanfragen gezielt. Sie können die Eigenschaften von .baz innerhalb oder außerhalb der Abfragen selbst eingeben. Ebenso können Sie alle von .baz ‚s Eigenschaften in den Medien Abfrage setzen, aber ich sammeln, das ist nicht das, was Sie suchen.

Quelle

2013-03-28 05:35:00 Jules

Ich verstehe die Medien-Anfragen, aber der Punkt ist, dass ich versuche, die _same_ Stile für beide zu haben und einfach etwas verstecken, wenn gedruckt. Das Kopieren aller CSS in die Druckregel scheint umständlich. – ecirish

Was hält dich davon ab? Setzen Sie alle Stile außer der betreffenden Klasse/ID außerhalb der Medienabfrage und lassen Sie die Medienabfrage nur für diese Regel gelten. Ich werde meine Antwort aktualisieren, um meinen Standpunkt besser zu veranschaulichen. – Jules

IDK über die Druckformatvorlagen des ZURB, und ohne ein Beispiel, es ist ziemlich schwer zu beantworten, aber Sie können weasyprint, Open-Source-Bibliothek verwenden HTML/CSS zu pdf https://github.com/Kozea/WeasyPrint

Quelle

2013-03-28 07:08:44 albert

Das sieht interessant aus, aber wo dies die Seitennummerierung sehr gut zu behandeln scheint, suche ich nach einem einfachen einseitigen Dokument. – ecirish

Mann mein Schlechter, das habe ich total falsch verstanden. Tu was @phil sagt. Legen Sie einfach display: none auf Ihrem Formular in das Druck-Stylesheet. – albert

Was ich getan habe, in dieser Art zu konvertieren Situationen verwenden Sie eine separate Datei für die print.css.

<link rel="stylesheet" type="text/css" href="global.css" /> 
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

Wenn der Browser druckt, die global.css Datei zuerst geladen wird und als die print.css Datei wird etwas aftewards überschreiben.

Beachten Sie jedoch, dass alle background: * Regeln beim Drucken standardmäßig in allen Browsern deaktiviert sind, sodass einige Stile trotzdem kompromittiert werden.

Quelle

2013-03-28 16:21:43 Phil

Samt Druck CSS als Bildschirm

Antwort

Verwandte Themen