onbeforeprint เป็น Event Attribute ใน HTML5 ที่จะถูกเรียกใช้งานเมื่อผู้ใช้กำลังจะพิมพ์หน้าเว็บ หรือเปิดหน้าเว็บในโหมดพิมพ์ (print preview) ก่อนที่กระบวนการพิมพ์จะเริ่มขึ้นจริง
การใช้งาน onbeforeprint
onbeforeprint ใช้ในการกำหนดฟังก์ชัน JavaScript ที่จะทำงานก่อนที่หน้าจะเข้าสู่โหมดการพิมพ์ ซึ่งสามารถนำไปใช้เพื่อปรับแต่งเอกสารก่อนพิมพ์ เช่น การซ่อนหรือแสดงบางส่วนของเนื้อหา ปรับรูปแบบ CSS หรือการโหลดทรัพยากรเพิ่มเติม
วิธีการใช้งาน onbeforeprint
สามารถใช้งานได้ใน 3 รูปแบบหลัก ดังนี้
1. การใช้งานใน HTML โดยตรง
<!DOCTYPE html>
<html lang="th">
<head>
<title>onbeforeprint Example</title>
<style>
.no-print {
display: none;
}
</style>
</head>
<body>
<div>
<h1>เนื้อหาที่ต้องการพิมพ์</h1>
<p>ข้อมูลนี้จะแสดงเมื่อพิมพ์</p>
</div>
<div class="no-print">
<p>ข้อมูลนี้จะถูกซ่อนเมื่อพิมพ์</p>
</div>
<button onclick="window.print()">พิมพ์หน้านี้</button>
<script>
function beforePrint() {
document.querySelector('.no-print').style.display = 'none';
}
function afterPrint() {
document.querySelector('.no-print').style.display = 'block';
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
</script>
</body>
</html>ในตัวอย่างนี้ เมื่อผู้ใช้กดปุ่มพิมพ์ ฟังก์ชัน beforePrint() จะซ่อนเนื้อหาบางส่วนที่ไม่ต้องการให้แสดงตอนพิมพ์ และหลังจากการพิมพ์เสร็จ ฟังก์ชัน afterPrint() จะคืนค่าการแสดงผลของเนื้อหาดังกล่าว
2. การใช้งาน onbeforeprint ใน JavaScript
<!DOCTYPE html>
<html lang="th">
<head>
<title>onbeforeprint in JavaScript</title>
<style>
.print-only {
display: none;
}
</style>
</head>
<body>
<div>
<h1>เนื้อหาหลัก</h1>
<p>เนื้อหานี้จะแสดงตลอดเวลา</p>
</div>
<div class="print-only">
<p>เนื้อหานี้จะแสดงเฉพาะเมื่อพิมพ์</p>
</div>
<button onclick="window.print()">พิมพ์หน้านี้</button>
<script>
window.onbeforeprint = function() {
document.querySelector('.print-only').style.display = 'block';
};
window.onafterprint = function() {
document.querySelector('.print-only').style.display = 'none';
};
</script>
</body>
</html>ในตัวอย่างนี้ เมื่อหน้าเว็บเข้าสู่โหมดการพิมพ์ (onbeforeprint) เนื้อหาที่มีคลาส .print-only จะปรากฏขึ้น และเมื่อการพิมพ์เสร็จสิ้น (onafterprint) เนื้อหานี้จะถูกซ่อนไว้
3. การใช้งานร่วมกับ CSS Media Query สำหรับโหมดการพิมพ์
<!DOCTYPE html>
<html lang="th">
<head>
<title>onbeforeprint and CSS Media Query</title>
<style>
@media print {
.no-print {
display: none;
}
.print-only {
display: block;
}
}
.print-only {
display: none;
}
</style>
</head>
<body>
<div>
<h1>ตัวอย่างเนื้อหา</h1>
<p>เนื้อหานี้จะแสดงในทุกโหมด</p>
</div>
<div class="no-print">
<p>เนื้อหานี้จะไม่แสดงเมื่อพิมพ์</p>
</div>
<div class="print-only">
<p>เนื้อหานี้จะแสดงเฉพาะเมื่อพิมพ์</p>
</div>
<button onclick="window.print()">พิมพ์หน้านี้</button>
</body>
</html>ในตัวอย่างนี้ เราใช้ Media Query ใน CSS เพื่อตรวจจับว่าอยู่ในโหมดการพิมพ์ และจัดการแสดงหรือซ่อนเนื้อหาโดยอัตโนมัติ
การประยุกต์ใช้งาน
- การแสดงเนื้อหาเพิ่มเติมในโหมดการพิมพ์: สามารถเพิ่มคำอธิบายหรือข้อมูลเพิ่มเติมที่ไม่จำเป็นสำหรับการแสดงบนหน้าเว็บ แต่ต้องการให้ปรากฏในสำเนาที่พิมพ์ออกมา
- การซ่อนเนื้อหาที่ไม่ต้องการพิมพ์: อาจมีเนื้อหาบางส่วนเช่นปุ่มหรือโฆษณาที่ไม่ต้องการให้ปรากฏในเอกสารที่พิมพ์ ซึ่งสามารถซ่อนได้
- การปรับแต่งรูปแบบ: เปลี่ยนแปลงขนาดตัวอักษรหรือเลย์เอาต์เพื่อให้เหมาะสมกับการพิมพ์มากขึ้น
สรุป
onbeforeprint เป็น Event ที่ช่วยให้สามารถปรับแต่งหน้าเว็บก่อนการพิมพ์ ซึ่งเป็นประโยชน์ในหลายกรณี เช่น การจัดการเนื้อหา การซ่อนข้อมูลที่ไม่ต้องการพิมพ์ หรือการเพิ่มข้อมูลสำหรับโหมดการพิมพ์