Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script after the document is printed in HTML?
The onafterprint event attribute in HTML executes a JavaScript function after the user has printed the document or closed the print preview dialog. This event is useful for tracking print actions, cleaning up resources, or providing user feedback after printing.
Syntax
Following is the syntax for the onafterprint attribute −
<body onafterprint="functionName()">
You can also use it with JavaScript event listeners −
window.addEventListener("afterprint", functionName);
Using onafterprint Attribute
The onafterprint attribute is typically added to the <body> element and triggers when the print dialog is closed, regardless of whether the user actually printed the document or cancelled the operation.
Example
You can try to run the following code to implement the onafterprint attribute −
<!DOCTYPE html>
<html>
<head>
<title>OnAfterPrint Example</title>
</head>
<body onafterprint="display()" style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Print This Page</h1>
<p>Press Ctrl+P (or Cmd+P on Mac) to open the print dialog. When you close the print dialog, you will see an alert message.</p>
<button onclick="window.print()">Print This Page</button>
<script>
function display() {
alert("Print dialog was closed!");
}
</script>
</body>
</html>
When you trigger the print function and close the print dialog, an alert appears with "Print dialog was closed!" −
Alert: Print dialog was closed!
Using addEventListener Method
Instead of using the onafterprint attribute directly, you can use the addEventListener method for better separation of HTML and JavaScript code.
Example
Following example demonstrates using the addEventListener method for the afterprint event −
<!DOCTYPE html>
<html>
<head>
<title>AfterPrint with addEventListener</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Print Event Listener Example</h1>
<p>This example uses addEventListener to handle the afterprint event.</p>
<button onclick="window.print()">Print Page</button>
<p id="status">Status: Ready to print</p>
<script>
window.addEventListener("afterprint", function() {
document.getElementById("status").textContent = "Status: Print dialog was closed at " + new Date().toLocaleTimeString();
});
</script>
</body>
</html>
After closing the print dialog, the status message updates with a timestamp −
Status: Print dialog was closed at 2:30:45 PM
Combining onbeforeprint and onafterprint
You can use both onbeforeprint and onafterprint events together to handle actions before and after printing, such as hiding certain elements during printing and restoring them afterward.
Example
Following example shows how to use both print events together −
<!DOCTYPE html>
<html>
<head>
<title>Before and After Print Events</title>
<style>
.no-print { display: block; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Document Title</h1>
<p>This content will be printed.</p>
<div class="no-print" id="controls">
<p><strong>Controls (hidden during printing):</strong></p>
<button onclick="window.print()">Print Document</button>
</div>
<p id="printStatus"></p>
<script>
window.addEventListener("beforeprint", function() {
document.getElementById("controls").style.display = "none";
document.getElementById("printStatus").textContent = "Preparing for print...";
});
window.addEventListener("afterprint", function() {
document.getElementById("controls").style.display = "block";
document.getElementById("printStatus").textContent = "Print process completed!";
});
</script>
</body>
</html>
The controls section is hidden before printing and restored after the print dialog closes.
Browser Compatibility
The onafterprint event is supported in most modern browsers including Chrome, Firefox, Safari, and Edge. However, the event may not trigger consistently across all browsers, particularly on mobile devices where printing behavior varies.
Common Use Cases
The onafterprint event is commonly used for −
Analytics tracking − Recording when users print documents for usage statistics.
UI restoration − Showing elements that were hidden during printing.
User feedback − Displaying confirmation messages or next steps after printing.
Resource cleanup − Removing temporary print-specific formatting or content.
Conclusion
The onafterprint event attribute provides a way to execute JavaScript code after the print dialog is closed. It can be implemented using either the HTML attribute directly on the body element or through JavaScript's addEventListener method for better code organization and maintainability.
305 Views
