Print preview im IE und HTML5

Kommentieren Jun 14 2011

 

HTML5 kennt ja einige neue Tags. Nun sind die leider nicht mit IE kompatibel. Mal wieder. Aber dies ist ein anderes Thema.

Nun könnte man ja denken, dass man mit einem print CSS alles so hinbiegen kann wie man möchte. Ne. Pustekuchen.

Leider kann der IE die neuen Elemente auch nicht richtig mit CSS versehen. Wie und was genau liegt im dunkeln.

Der Weg an diesem “Problem” vorbei liegt darin, dass man einfach diese Tags mit “normalen” Tags ersetzt.

Hier ist mal ein sehr einfacher Ansatz mit Hilfe von jQuery;


window.onbeforeprint = printFix;

function printFix() {

    $("footer").replaceWith(function () {

      var attClass = $(this).attr('class');

      var attId = $(this).attr('id');

      var attStyle = $(this).attr('style');

      var add = '';

        

      if(attClass) { add = 'class="'+attClass+'"' };

      if(attId) { add = add+' id="'+attId+'"' };

      if(attStyle) { add = add+' style="'+attStyle+'"' };

        

      return "" + $(this).html() + "";

  });

}



Je nach CSS Angaben kann es natürlich sein, dass diese Methode nicht funktioniert. Es sollte auch darauf geachtet werden, dass aus ‹footer› ein ‹div› wird. Daher sollte man für solche Tags ohne Attribute eines für das print CSS einbauen.
Würde dann so aussehen:

< footer id="footer-print">< /footer>


Wird dann zu:

< div id="footer-print">< /div>



Mit dieser Methode sollte man die Druckansicht der einzelnen Browser in den Griff zu bekommen.
Wer es besonders speziell will, der sollte ein Druck Layout durch einen Drucken Knopf auf der Website anbieten.




UPDATE: 09.07.2014
An dank an Robert, der mich auf den nicht mehr aktiven Link von w3schools hingewisen hat. Dieser ist nun wieder aktuell.
Robert hat auch eine Alternative zu der Übersicht auf w3schools.