1. Programmbeschreibung
1) Dieses Programm kann einen Bereich auf der Seite zum Drucken auswählen und im Iframe-Modus drucken;
2) Der Unterschied zum ursprünglichen print() besteht darin, dass der Inhalt der aktuell aufgerufenen Seite nach dem Abbrechen des Seitendrucks vollständig erhalten bleiben kann.
2. Codeteil
1) JS-Funktion:
Kopieren Sie den Codecode wie folgt:
Funktion do_print(id_str)//id-str druckt die ID des Bereichs
{
var el = document.getElementById(id_str);
var iframe = document.createElement('IFRAME');
vardoc = null;
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
// Führen Sie den proprietären CSS-Stil zum Drucken ein. www.111Cn.net ändert ihn entsprechend der tatsächlichen Situation
doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
doc.write('<div>' + el.innerHTML + '</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0)
{
document.body.removeChild(iframe);
}
}
2) HTML:
Kopieren Sie den Codecode wie folgt:
//Druckbereich:
<div id="print_box">
...
</div>
// print aufrufen
<button onclick="javascript:do_print('print_box');">Drucken</button>
3. Testen
Klicken Sie auf der Seite auf die Schaltfläche „Drucken“, um den Druck zu testen.
Zusätzlich zu den oben genannten Methoden können wir auch JQuery zum Instanziieren verwenden. Der Code lautet wie folgt
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.PrintArea.js"></script>
<Skript>
$(document).ready(function(){
$("input#biuuu_button").click(function(){
$("div#myPrintArea").printArea();
});
});
</script>
<input id="biuuu_button" type="button" value="Print"></input>
<div id="myPrintArea">.....Textdruckteil.....</div>
Wenn wir einen Flächendruck erreichen möchten, können wir die folgende Methode ausprobieren
Der folgende Artikel beschreibt eine supereinfache Methode zum Realisieren der Druckfunktion der Seite. Sie kann nicht nur die gesamte Seite, sondern auch einen bestimmten Bereich der Seite drucken.
Kopieren Sie den Codecode wie folgt:
<html>
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
Funktion printdiv(printpage){
var headstr="<html><head><title></title></head><body>";
var footstr="</body>";
var newstr=document.all.item(printpage).innerHTML;
var oldstr=document.body.innerHTML;
document.body.innerHTML=headstr+newstr+footstr;
window.print();
document.body.innerHTML=oldstr;
return false;
}
</script>
<title>div print</title>
</head>
<Körper>
<input type="button" onClick="printdiv('div_print');" value="print">
<div id="div_print">
<h1 style="Color:Red">Druckbereich: www.VeVB.COm</h1>
</div>
Dieser Bereich kann nicht gedruckt werden!
</body>
</html>