พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน onafterprint Event Attribute

onafterprint เป็น Event Attribute ใน HTML5 ที่จะถูกเรียกใช้เมื่อกระบวนการพิมพ์ (Print) เอกสารเสร็จสิ้นแล้ว โดยเหตุการณ์นี้สามารถใช้เพื่อดำเนินการใด ๆ หลังจากที่ผู้ใช้ทำการพิมพ์เอกสารเสร็จ เช่น การเรียกฟังก์ชันเพื่อรีเฟรชหน้าเว็บ หรือทำให้บางองค์ประกอบกลับมาปรากฏในหน้าเว็บหลังจากซ่อนระหว่างการพิมพ์

รูปแบบการใช้งานของ onafterprint

การใช้งานผ่าน Inline HTML: สามารถกำหนด event นี้ไว้ในองค์ประกอบ HTML โดยตรงผ่านการใส่ attribute onafterprint

HTML
<body onafterprint="alert('Print complete!')">
    <h1>พิมพ์เอกสารนี้</h1>
    <button onclick="window.print()">พิมพ์</button>
</body>

ตัวอย่างนี้ เมื่อผู้ใช้พิมพ์เอกสารเสร็จ ระบบจะทำการแสดงการแจ้งเตือนว่า “Print complete!”

การใช้งานผ่าน JavaScript: สามารถผูก event onafterprint กับ window หรือ document ผ่าน JavaScript ได้

HTML
<html>
<head>
    <script>
        window.onafterprint = function() {
            console.log('The document was printed.');
        };
    </script>
</head>
<body>
    <h1>พิมพ์เอกสารนี้</h1>
    <button onclick="window.print()">พิมพ์</button>
</body>
</html>

ในตัวอย่างนี้ เมื่อกระบวนการพิมพ์เสร็จสิ้น ข้อความ “The document was printed.” จะถูกบันทึกใน console ของเบราว์เซอร์

การใช้งานผ่าน addEventListener: อีกวิธีหนึ่งในการใช้งานคือการใช้ addEventListener เพื่อทำให้สามารถผูกและยกเลิกการผูก event ได้อย่างยืดหยุ่น

HTML
<html>
<head>
    <script>
        window.addEventListener('afterprint', function() {
            alert('Printing has finished!');
        });
    </script>
</head>
<body>
    <h1>พิมพ์เอกสารนี้</h1>
    <button onclick="window.print()">พิมพ์</button>
</body>
</html>

วิธีนี้สามารถเพิ่มการฟัง event afterprint ได้ โดยจะทำให้ฟังก์ชันทำงานเมื่อกระบวนการพิมพ์เสร็จสิ้นแล้ว

การประยุกต์ใช้งาน

การเปลี่ยนแปลง CSS หลังจากพิมพ์: ในบางกรณี อาจต้องการซ่อนหรือแสดงเนื้อหาบางส่วนเฉพาะในตอนพิมพ์ เช่น การซ่อนปุ่มพิมพ์ขณะพิมพ์ และทำให้ปุ่มกลับมาแสดงอีกครั้งหลังพิมพ์เสร็จ

HTML
<html>
<head>
    <style>
        @media print {
            #printButton {
                display: none;
            }
        }
    </style>
    <script>
        window.onafterprint = function() {
            document.getElementById('printButton').style.display = 'block';
        };
    </script>
</head>
<body>
    <h1>พิมพ์เอกสารนี้</h1>
    <button id="printButton" onclick="window.print()">พิมพ์</button>
</body>
</html>

ในตัวอย่างนี้ ปุ่ม พิมพ์ จะถูกซ่อนไว้ขณะพิมพ์ และเมื่อการพิมพ์เสร็จสิ้น จะกลับมาแสดงผลตามเดิม

การรีเซ็ตฟอร์มหรือโหลดข้อมูลใหม่หลังพิมพ์: สามารถใช้ onafterprint เพื่อทำการรีเฟรชข้อมูลในหน้าเว็บ หรือรีเซ็ตฟอร์มให้กลับมาเป็นค่าเริ่มต้นหลังจากพิมพ์เอกสารเสร็จ

HTML
<html>
<head>
    <script>
        window.onafterprint = function() {
            location.reload();
        };
    </script>
</head>
<body>
    <h1>พิมพ์เอกสารนี้</h1>
    <button onclick="window.print()">พิมพ์</button>
</body>
</html>

ตัวอย่างนี้จะรีเฟรชหน้าเว็บโดยอัตโนมัติหลังจากที่การพิมพ์เสร็จสิ้น

สรุป

onafterprint เป็น Event Attribute ที่มีประโยชน์ในการควบคุมการทำงานหลังจากการพิมพ์เสร็จสิ้น เช่น การแสดงข้อความแจ้งเตือน เปลี่ยนแปลงองค์ประกอบในหน้าเว็บ หรือโหลดข้อมูลใหม่ โดยสามารถใช้งานได้ผ่านหลายรูปแบบไม่ว่าจะเป็นการกำหนดใน HTML โดยตรง หรือการใช้ JavaScript ในการควบคุม

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ