Drucken mit jQuery

Zugriffe: 6110 starstarstarstarstarstarstarstarstarstar Bewertung:2,71 (7 Bewertungen) 26.09.2008

Drucken von Webseiteninhalten ist immer ein zweischneidiges Schwert. Oftmals möchte man nur bestimmte Bereiche der Seite nur drucken.

Das jQuery Plugin PrintArea bietet hier einen interessanten Ansatz. Hier wird über ein nicht sichtbares IFrame der selektierte Content der Webseite ausgedruckt.
Wenn man sich dann noch bei macht und innerhalb des Plugins das jQuery - Konzept verfolgt, erhält man dann folgende Erweiterung, die das Ausdrucken von Teilbereichen der Webseite deutlich vereinfacht.

$.fn.printArea = function() { 
       var ele = $(this); 
       var counter = 0; 
       $("iframe[@id^='printArea']").remove(); 
       return this.each(function(e) { 
           counter++; 
           var iframe = $('<iframe />') .css({ 
               position: 'absolute', 
               width: '0px', 
               height: '0px', 
               left: '-500px', 
               top: '-500px' }) 
         .attr('id', "printArea_" + counter) 
         .appendTo($("body"));
  var doc = iframe.get(0).contentWindow.document;
  $("link").each(function(e) {
  if (this.rel.toLowerCase() == 'stylesheet')
   doc.write('<link type="text/css" rel="stylesheet" href="' + this.href + '"></link>');
  });

doc.write('<div class="' + ele.attr("class") + '">' + ele.html() + '</div>');
 doc.close();
 $(doc.body).css({ backgroundColor: '#fff' });
  iframe.get(0).contentWindow.focus();
 setTimeout(function() { iframe.get(0).contentWindow.print(); }, 10);
 }); }

 
 Zunächst werden bei jedem Aufruf alle im DOM noch vorhandenen IFrames, deren ID-Attribute mit printArea beginnt, aus dem DOM entfernt.

$("iframe[@id^='printArea']").remove();

Im nächsten Schritt werden für alle auf der Selektion gefundenen Bereiche jeweils ein separates IFrame erzeugt und dem Body-Element hinzugefügt.

var iframe = $('<iframe />')
      .css({ position: 'absolute', width: '0px', height: '0px', left: '-500px', top: '-500px' })
      .attr('id', "printArea_" + counter)
      .appendTo($("body"));

Über den Eingangs definierten Counter erhält jedes IFrame dabei seine eindeutige ID. Im nächsten Schritt wird dann das CSS der Basisseite übernommen in das Document des IFrames.

var doc = iframe.get(0).contentWindow.document;
$("link").each(function(e) {
    if (this.rel.toLowerCase() == 'stylesheet') 
        doc.write('<link type="text/css" rel="stylesheet" href="' + this.href + '"></link>');
});

Anschließend muss noch der Inhalt des selektierten Bereiches im IFrame platziert werden, was die folgenden Zeilen übernehmen:

doc.write('<div class="' + ele.attr("class") + '">' + ele.html() + '</div>'); 
doc.close();

Zum Schluss erhält das aktuelle IFrame den Focus und der Druck-Dialog beim Client wird aufgerufen, wobei der Timeout für den Opera-Browser sich von Vorteil erwies.

iframe.get(0).contentWindow.focus(); 
setTimeout(function() { iframe.get(0).contentWindow.print(); }, 10);

3 Kommentare
Aino Aino Mittwoch, 21. April 2010
Bin gerade bei der Recherche zum Drucken via jQuery auf diesen Artikel gestossen. Vielen Dank.
Jetzt kann ich endlich Teilbereiche von meinen Webseiten druckbar machen ;-)
Michael Michael Dienstag, 3. April 2012
Vielen Dank! Besonders gefällt mir, daß der Code erklärt wird.
Android Development Tools Android Development Tools Donnerstag, 20. September 2012
gerade bei der Recherche zum Drucken via jQuery auf diesen Artikel gestossen. Vielen Dank.
Jetzt kann ich endlich Teilbereiche von meinen Webseiten druckbar machen ;-)

Neuen Kommentar verfassen

Bestätigungscode