1. Deskripsi program
1) Program ini dapat memilih area pada halaman untuk dicetak dan dicetak dalam mode iframe;
2) Perbedaan dari print() asli adalah konten halaman yang sedang diakses dapat dipertahankan sepenuhnya setelah halaman pencetakan dibatalkan.
2. Bagian kode
1) Fungsi JS:
Copy kode kodenya sebagai berikut:
function do_print(id_str)//id-str mencetak id area tersebut
{
var el = dokumen.getElementById(id_str);
var iframe = dokumen.createElement('IFRAME');
vardoc = nol;
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
dokumen.body.appendChild(iframe);
doc = iframe.contentWindow.document;
//Memperkenalkan gaya CSS eksklusif untuk pencetakan, www.111Cn.net akan memodifikasinya sesuai dengan situasi aktual
doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
doc.write('<div>' + el.innerHTML + '</div>');
doc.close();
iframe.contentWindow.fokus();
iframe.contentWindow.print();
jika (navigator.userAgent.indexOf("MSIE") > 0)
{
dokumen.body.removeChild(iframe);
}
}
2)HTML:
Copy kode kodenya sebagai berikut:
//Area cetak:
<div id="print_box">
...
</div>
// panggil cetak
<button onclick="javascript:do_print('print_box');">Cetak</button>
3. Tes
Klik tombol cetak pada halaman untuk menguji pencetakan;
Selain cara diatas, kita juga bisa menggunakan jquery untuk membuat instance, kodenya sebagai berikut
Copy kode kodenya sebagai berikut:
<skrip type="teks/javascript" src="jquery-1.4.2.min.js"></script>
<skrip type="text/javascript" src="jquery.PrintArea.js"></script>
<skrip>
$(dokumen).siap(fungsi(){
$("input#biuuu_button").klik(fungsi(){
$("div#myPrintArea").printArea();
});
});
</skrip>
<input id="biuuu_button" type="button" value="Cetak"></input>
<div id="myPrintArea">.....Bagian pencetakan teks.....</div>
Jika kita ingin mencapai pencetakan area kita dapat mencoba cara berikut
Artikel berikut membagikan cara super sederhana untuk mewujudkan fungsi pencetakan halaman. Tidak hanya dapat mencetak seluruh halaman, tetapi juga mencetak area tertentu pada halaman.
Copy kode kodenya sebagai berikut:
<html>
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<skrip bahasa="javascript">
fungsi printdiv(halaman cetak){
varheadstr="<html><head><title></title></head><body>";
var footstr="</body>";
var newstr=document.all.item(printpage).innerHTML;
var oldstr=dokumen.tubuh.innerHTML;
document.body.innerHTML=headstr+newstr+footstr;
jendela.cetak();
document.body.innerHTML=oldstr;
kembali salah;
}
</skrip>
<title>cetak div</title>
</kepala>
<tubuh>
<masukan tipe="tombol" onClick="printdiv('div_print');" nilai=" cetak">
<div id="div_print">
<h1 style="Color:Red">Area cetak: www.VeVB.COM</h1>
</div>
Area ini tidak dapat dicetak!
</tubuh>
</html>