Wie kann ich eine Webseite mit all ihren CSS-Stil an die Seite angehängt drucken?

Question

Ich möchte eine Druckschaltfläche hinzufügen, damit Benutzer meine Webseite drucken können. Wenn ich jedoch drucke, sind alle CSS-Stile verloren. Es scheint, dass der Drucker nur die grundlegenden HTML-Elemente behält. Wenn ich die Seite genau so ausdrucken möchte, wie sie in einem Browser aussieht, was soll ich tun? Ich meine, wenn ich einen Farbdrucker benutze, wird eine bunte Seite mit CSS-Styles darauf gedruckt. Wenn ich einen Schwarz-Weiß-Drucker verwende, sollte er helle Farben als weiße und dunkle Farben wie Grau oder Schwarz drucken.

Answer 1

Wenn Sie media="screen" auf Ihrem link Element haben, versuchen Sie, es zu entfernen oder durch media="all" zu ersetzen.

Answer 2

CSS-Stylesheets haben ein Attribut media. Es gibt an, auf welche Medien dieses CSS anwendbar ist. Mögliche Medientypen sind aufgeführt.

<style type="text/css" media="all"> 
    @import "myCss.css"; 
</style> 

ODER

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

Answer 3

Werfen Sie einen Blick auf this und this, die helfen sollte.

Grundsätzlich müssen Sie eine css print-Anweisung hinzufügen.

<link rel="stylesheet" href="URL to your print.css" type="text/css" media="print" />