Wie kann ich die Ausgabe des Browsers für die Druck-/Druckvorschau anpassen?

Ich versuche, bestimmte DIVs dynamisch zu verstecken, wenn ein Druck (oder Druckvorschau) vom Browser auftritt.Wie kann ich die Ausgabe des Browsers für die Druck-/Druckvorschau anpassen?

ich mit zwei Stylesheets, eine für normale und eine für Printmedien statisch leicht unterscheiden kann:

Aber ich brauche noch einen Schritt weiter zu gehen und einige Elemente dynamisch verstecken, wenn das Blatt Druckformat aktiv wird während eines Drucks basierend auf bestimmten Kriterien

Eine Möglichkeit, es leicht zu lösen wäre ein DOM-Ereignis für die Handhabung von print/printview zu behandeln, dann könnte ich nur jQuery verwenden, um die Anzeige zu ändern: keine für die Klassen, die ausgeblendet werden müssen , aber ich kann keine DOM-Druckveranstaltung finden !!

Wer weiß, was die Lösung ist?

Quelle

2008-10-10 user26793

Sie meinen, Sie müssen Divs auf dem Bildschirm ausblenden, nachdem der Benutzer die Seite druckt (oder Druckvorschau)? –

Es gibt ein onbeforeprint Ereignis in IE. Es scheint nicht von anderen gängigen Browsern unterstützt zu werden. (Ich habe Firefox 3.0.3 und Safari 3.1.2 getestet.)

Quelle

2008-10-10 12:22:02

Nicht alle Browser ermöglichen die Erfassung des Druckereignisses. Ich habe gesehen, dass dies angegangen wurde, indem ein Link "Diese Seite drucken" hinzugefügt wurde und dann dieses Klick-Ereignis verwendet wurde, um das zu erreichen, was Sie brauchen.

Quelle

2008-10-10 12:24:59 derby

Gerade diese DIVs mit einer Klasse markieren, die auf dem Drucksheet versteckt:

HTML

<div id='div19' class='noprint'> 
    ... 
</div>

print.css

.noprint { 
    display: none; 
}

Wenn Sie nicht wissen, Im Voraus, welche Elemente du verstecken musst, kannst du Javascript verwenden, um die Klasse für das gegebene Objekt festzulegen cts:

Javascript

document.getElementById('div19').className='noprint';

Quelle

2008-10-10 13:20:48

Ich glaube nicht, dass Sie einen Druck Veranstaltung benötigen. Alles, was Sie tun müssen, ist Ihre @media print Stile basierend auf Ihren Javascript (?) Kriterien anzupassen. Wenn der Benutzer die Seite zu drucken versucht, die @media print Stil gelten und Ihre Stile werden in der Tat sein:

<html> 
<head> 
<style id="styles" type="text/css"> 
@media print { .noprint { display:none; } } 
</style> 
<script type="text/javascript"> 
var x = Math.random(); 

if (x > .5) { 
    var style = document.createElement('style'); 
    style.type = 'text/css'; 
    style.innerHTML = '@media print { .maybe_noprint { display:none; } }'; 
    document.getElementsByTagName('head')[0].appendChild(style); 
} 
</script> 
</head> 
<body> 
<div class="noprint">This will never print.</div> 
<span class="maybe_noprint">This may print depending on the value of x.</span> 
</body> 
</html>

Wenn Sie serverseitige Kriterien verwenden, um zu bestimmen, was druckt dann nur noch serverseitigen Code spucken aus @media print, um die Klassen nach Bedarf zu dekorieren. Vielleicht möchten Sie auch eine vorhandene Klasse ändern, die bereits in @media print ist, oder das neue CSS mit etwas anderem als innerHTML erstellen, was ich zugegeben habe, riecht schrecklich, scheint aber in Opera 9.6, Safari für Windows 3.1 zu funktionieren .2, IE 6 und Firefox 2.0.0.17 (Ich habe keine anderen Browser getestet).

Quelle

2008-10-10 20:06:08

Wie kann ich die Ausgabe des Browsers für die Druck-/Druckvorschau anpassen?

Antwort

Verwandte Themen