1. Description du programme
1) Ce programme peut sélectionner une zone de la page à imprimer et imprimer en mode iframe ;
2) La différence avec l'original print() est que le contenu de la page actuellement consultée peut être entièrement conservé après l'annulation de l'impression de la page.
2. Partie codée
1) Fonction JS :
Copiez le code comme suit :
la fonction do_print(id_str)//id-str imprime l'identifiant de la zone
{
var el = document.getElementById(id_str);
var iframe = document.createElement('IFRAME');
vardoc = nul ;
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
//Introduire le style CSS propriétaire pour l'impression, www.111Cn.net le modifiera en fonction de la situation réelle
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();
si (navigator.userAgent.indexOf("MSIE") > 0)
{
document.body.removeChild(iframe);
}
}
2)HTML :
Copiez le code comme suit :
//Zone d'impression :
<div id="print_box">
...
</div>
// appelle l'impression
<button onclick="javascript:do_print('print_box');">Imprimer</button>
3. Testez
Cliquez sur le bouton Imprimer sur la page pour tester l'impression ;
En plus des méthodes ci-dessus, nous pouvons également utiliser jquery pour instancier, le code est le suivant
Copiez le code comme suit :
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.PrintArea.js"></script>
<script>
$(document).ready(function(){
$("input#biuuu_button").click(function(){
$("div#myPrintArea").printArea();
});
});
</script>
<input id="biuuu_button" type="button" value="Print"></input>
<div id="myPrintArea">.....Partie d'impression de texte.....</div>
Si nous voulons réaliser une impression de zone, nous pouvons essayer la méthode suivante
L'article suivant partage une méthode très simple pour réaliser la fonction d'impression de la page. Il peut non seulement imprimer la page entière, mais également imprimer une certaine zone de la page.
Copiez le code comme suit :
<html>
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<langage de script="javascript">
fonction printdiv(page d'impression){
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;
renvoie faux ;
}
</script>
<title>impression div</title>
</tête>
<corps>
<input type="button" onClick="printdiv('div_print');" value="print">
<div id="div_print">
<h1 style="Color:Red">Zone d'impression : www.VeVB.COm</h1>
</div>
Cette zone ne peut pas être imprimée !
</corps>
</html>