1. คำอธิบายโปรแกรม
1) โปรแกรมนี้สามารถเลือกพื้นที่บนหน้าสำหรับการพิมพ์และพิมพ์ในโหมด iframe
2) ความแตกต่างจากต้นฉบับ print() คือเนื้อหาของหน้าที่เข้าถึงอยู่ในปัจจุบันสามารถคงไว้ได้อย่างสมบูรณ์หลังจากยกเลิกหน้าการพิมพ์
2. ส่วนรหัส
1) ฟังก์ชัน JS:
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่น do_print(id_str)//id-str พิมพ์รหัสของพื้นที่
-
var el = document.getElementById(id_str);
var iframe = document.createElement('IFRAME');
วาร์ด็อก = โมฆะ;
iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
//แนะนำรูปแบบ CSS ลิขสิทธิ์เฉพาะสำหรับการพิมพ์ www.111Cn.net จะปรับเปลี่ยนตามสถานการณ์จริง
doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
doc.write('<div>' + el.innerHTML + '</div>');
doc.ปิด();
iframe.contentWindow.focus();
iframe.contentWindow.print();
ถ้า (navigator.userAgent.indexOf("MSIE") > 0)
-
document.body.removeChild(iframe);
-
-
2) HTML:
คัดลอกรหัสรหัสดังต่อไปนี้:
//พื้นที่พิมพ์:
<div id="print_box">
-
</div>
// โทรพิมพ์
<button onclick="javascript:do_print('print_box');">พิมพ์</button>
3. การทดสอบ
คลิกปุ่มพิมพ์บนหน้าเพื่อทดสอบการพิมพ์
นอกจากวิธีการข้างต้นแล้ว เรายังสามารถใช้ jquery เพื่อสร้างอินสแตนซ์ได้ด้วย โดยมีโค้ดดังนี้
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.PrintArea.js"></script>
<สคริปต์>
$(เอกสาร).ready(function(){
$("input#biuuu_button").คลิก(ฟังก์ชั่น(){
$("div#myPrintArea").printArea();
-
-
</สคริปต์>
<input id="biuuu_button" type="button" value="พิมพ์"></input>
<div id="myPrintArea">.....ส่วนการพิมพ์ข้อความ.....</div>
หากเราต้องการพิมพ์พื้นที่ให้สำเร็จ เราสามารถลองวิธีการต่อไปนี้
บทความต่อไปนี้แบ่งปันวิธีการง่าย ๆ ในการรับรู้ฟังก์ชันการพิมพ์ของหน้า ไม่เพียงแต่สามารถพิมพ์ทั้งหน้า แต่ยังพิมพ์บางพื้นที่ของหน้าได้อีกด้วย
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<ภาษาสคริปต์ = "จาวาสคริปต์">
ฟังก์ชั่น printdiv (หน้าพิมพ์) {
var headstr="<html><head><title></title></head><body>";
var footstr="</body>";
var newstr=document.all.item(หน้าพิมพ์).innerHTML;
var oldstr=document.body.innerHTML;
document.body.innerHTML=headstr+newstr+footstr;
หน้าต่าง.พิมพ์();
document.body.innerHTML=oldstr;
กลับเท็จ;
-
</สคริปต์>
<title>การพิมพ์ div</title>
</หัว>
<ร่างกาย>
<input type="button" onClick="printdiv('div_print');" value=" พิมพ์">
<div id="div_print">
<h1 style="Color:Red">พื้นที่พิมพ์: www.VeVB.COm</h1>
</div>
บริเวณนี้ไม่สามารถพิมพ์ได้!
</ร่างกาย>
</html>