druckvorschau in popupfenster

monkderhonk · #1 (**permalink**) 16.02.2007, 18:01

Hi Leute,

da man ja nicht direkt auf die Druckvorschau des Browser verweisen kann, hab ich mich mal daran gemacht das per javascript zu simulieren. Das Ziel ist es eine Voransicht anzubieten, anhand dessen der Besucher sieht, was alles auf dem Papier landet. Ich habe leider keinen Code dazu gefunden und bin selber nicht der allzugroße Spezialist, vielleicht kann ja der ein oder andere ein paar nützliche Tipps geben.

Ich habe also eine ganz normale html-seite mit style und script-tags. diese werden von dem script gelöscht, sobald es in einem popup mit dem namen print-preview geladen wird.
Anschließend wird ein neuer style-tag angefügt und auf die print-prev.css referenziert.

Die addEvent-methode ist Bestandteil der mootools, welche das replaceAllByPrint ausführt sobald die Seite "domready" ist, also die Grundstruktur geladen ist, noch bevor alle Bilder geladen sind (ich weiß zur Zeit keine Alternative).

Code:

if(window.name=='print-preview') {
window.addEvent('domready', replaceAllByPrint);
}
function printpreview(ziel) {

  var Fenster = window.open(ziel,'print-preview','width=794,menubar=no,location=no,toolbar=yes,status=no,resizable=yes,scrollbars=yes');
  if (Fenster) Fenster.focus();
  return !Fenster;
}

function replaceAllByPrint() {
var styles = document.getElementsByTagName("style");

var mengeStyles = styles.length;
for(var i =0; i<mengeStyles; i++) {
var vater = styles[0].parentNode;
vater.removeChild(styles[0]);
}

var links = document.getElementsByTagName("link");

var mengeLinks = links.length;
for(var j =0; j<mengeLinks; j++) {
var vaterL = links[0].parentNode;
vaterL.removeChild(links[0]);
}

var scripts = document.getElementsByTagName("script");

var mengeScripts = scripts.length;
for(var j =0; j<mengeScripts; j++) {
var vaterS = scripts[0].parentNode;
vaterS.removeChild(scripts[0]);
}

var newStyle = document.createElement("link");
newStyle.rel="stylesheet";
newStyle.type="text/css";
newStyle.href = "print-prev.css";

document.getElementsByTagName("head")[0].appendChild(newStyle);
}

Code:

<a href="javascript:printpreview(document.location.href);void(0);">Druckvorschau</a>

Vielen Dank für euere Antworten,
monk

gato · #2 (**permalink**) 17.02.2007, 03:04

Mal davon abgesehen, dass ich JavaScript für Teufelszeug halte, hier eine Idee von mir:

Binde das Stylesheet für die Druckvorschau einfach als alternatives Stylesheet ein.

Code:

<link rel="alternate stylesheet" type="text/css" media="print, embossed" href="./styles/print.css" />

Danach musst du nur noch für den Internet Explorer ein JavaScript zum schnellen Styleswitschen anbieten. Alle anderen können das ja von Haus aus.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Opera druckt Bild nicht / zeigt es in der Druckvorschau nicht an	olamuell	CSS	2	21.07.2010 16:19
Probleme mit PopUp-Fenster für Druckvorschau	Hasso	Javascript & Ajax	4	24.09.2009 18:52
Druck(vorschau) im IE 7 und 6	FuryDE	CSS	9	03.12.2008 15:31
page-break-after: Umbruch-Problem in Druckvorschau	STRiDeR	CSS	0	18.01.2007 09:25
Entwicklungstool = Druckvorschau / TIPP	ulle	Knowledge Base	7	03.10.2004 05:41