Supportnet / Forum / Skripte(PHP,ASP,Perl...)
Drucken mit JS wie bei der Bahn
Frage
Hallo,
ich möchte gern eine Druckfunktion einbauen, bei der man auf einen Button "Drucken" klickt und die Seite soll ausgedruckt werden bzw. das Druckmenü aufgerufen werden, aber ohne das dort dann der Button "Drucken" erscheint. Es soll im Grunde das gleiche Prinzip sein, wie auf den Seiten der Deutschen Bahn. Wenn man dort eine Verbindung sucht und dann auf "Druckansicht" geht, dann erscheinen oben zwei Button "Seite drucken" und "Fenster schließen". Wenn man die Seite dann druckt, dann erscheinen diese beiden Button aber nicht. Genau so will ich das auch gern haben. Der Quellcode der Bahn hat mir im Moment aber noch nicht viel gebracht. Kann mir einer sagen, wie ich das hinbekomme?
Noch zur Info. Die Seite die ich ausdrucken lassen will, habe ich mit php generiert (sprich die Druckansicht hab ich erst mal schon), also wenn es sogar mit php gehen würde, dann wär mir das nur recht, aber ich befürchte es läuft auf JS hinaus?
Danke!
Antwort 1 von rfb
zur Analyse des Bahn-Scripts
Der Button wird per write geschrieben.
Ein Mausklick ruft die Funktion printit() auf.
Die tauscht als erstes die Buttonbilder aus (vermutlich in irgendwas transparentes), ruft dann per print() die wirkliche Druckfunktion auf, und tauscht danach die Button-Bilder wieder zurück.
Du könntest stattdessen auch einfach ein Extra-CSS fürs Drucken anlegen und dort die Button mit display:none für den Drucker verstecken.
Einfach ans CSS folgendes anhängen:
und den Links die Klasse zuordnen:
<script type="text/javascript">
<!--
function printIt(){
document.printWin.src = "/img/x.gif";
document.closeWin.src = "/img/x.gif";
window.print();
document.printWin.src = "/img/d/printpage.gif";
document.closeWin.src = "/img/d/closewindow.gif";
}
document.write(´<a href="javascript:printIt();"><img src="/img/d/printpage.gif" width="99" height="18" border="0" vspace="3" name="printWin"><\/a>´);
document.write(´ ´);
document.write(´<a href="javascript:window.close();"><img src="/img/d/closewindow.gif" width="116" height="18" border="0" vspace="3" name="closeWin"><\/a>´);
//-->
</script>
Der Button wird per write geschrieben.
Ein Mausklick ruft die Funktion printit() auf.
Die tauscht als erstes die Buttonbilder aus (vermutlich in irgendwas transparentes), ruft dann per print() die wirkliche Druckfunktion auf, und tauscht danach die Button-Bilder wieder zurück.
Du könntest stattdessen auch einfach ein Extra-CSS fürs Drucken anlegen und dort die Button mit display:none für den Drucker verstecken.
Einfach ans CSS folgendes anhängen:
@media print
{
.keinDruck {display:none}
}
und den Links die Klasse zuordnen:
<a href="javascript:window.print();" class="keinDruck">Seite Drucken<\/a>Antwort 2 von rfb
muss natürlich
lauten.
<a href="javascript:window.print();" class="keinDruck">Seite Drucken</a>lauten.
Antwort 3 von Kathrin77
Ohhhh, super, das mit dem css ist ja echt klasse. Klappt wunderbar!! Das klappt sogar, wenn man keine Bilder per JS austauscht, sondern nur einen Link "Seite drucken" verwendet.
Vielen Danke rfb!!!
Kathrin
Vielen Danke rfb!!!
Kathrin