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
HTML onafterprint Event Attribute
The HTML onafterprint event attribute is triggered when a page has started printing or if the print dialog box has been closed in the HTML document. This event is useful for restoring page styles or displaying messages after the print operation is completed.
Syntax
Following is the syntax for the onafterprint event attribute −
<tagname onafterprint="script"></tagname>
The script parameter contains JavaScript code or a function call that executes after printing occurs.
Parameters
The onafterprint event attribute accepts the following parameter −
script − A JavaScript function or code that runs when the print operation ends or the print dialog is closed.
Browser Compatibility
The onafterprint event is supported in Internet Explorer, Firefox, Safari, Chrome, and Edge browsers. However, some mobile browsers may have limited support for print events.
Example − Basic onafterprint Usage
Following example demonstrates the basic usage of the onafterprint event attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML onafterprint Event Demo</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f8ff;
}
.message {
color: #d32f2f;
font-weight: bold;
margin-top: 20px;
}
</style>
</head>
<body onafterprint="showMessage()">
<h1>HTML onafterprint Event Demo</h1>
<p>This page demonstrates the onafterprint event.</p>
<p>Press Ctrl+P to open the print dialog, then close it to see the event in action.</p>
<div id="output"></div>
<script>
function showMessage() {
document.getElementById("output").innerHTML =
'<p class="message">Print dialog was closed! onafterprint event triggered.</p>';
}
</script>
</body>
</html>
When you press Ctrl+P and close the print dialog, a message appears confirming the event was triggered.
Example − Restoring Page Styles
Following example shows how to use onafterprint to restore page styles after printing −
<!DOCTYPE html>
<html>
<head>
<title>Style Restoration Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.content {
background: rgba(255,255,255,0.1);
padding: 20px;
border-radius: 8px;
}
button {
background: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body onbeforeprint="preparePrint()" onafterprint="restoreStyles()">
<div class="content">
<h1>Print Style Management</h1>
<p>This page changes styles before printing and restores them after.</p>
<button onclick="window.print()">Print This Page</button>
<p id="status">Page ready for printing</p>
</div>
<script>
function preparePrint() {
document.body.style.background = "white";
document.body.style.color = "black";
document.getElementById("status").textContent = "Preparing for print...";
}
function restoreStyles() {
document.body.style.background = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)";
document.body.style.color = "white";
document.getElementById("status").textContent = "Styles restored after printing!";
}
</script>
</body>
</html>
This example demonstrates using both onbeforeprint and onafterprint to manage print-friendly styles. The page switches to black text on white background for printing, then restores the original gradient background afterward.
Example − Print Analytics
Following example shows how to track print events for analytics purposes −
<!DOCTYPE html>
<html>
<head>
<title>Print Analytics Demo</title>
</head>
<body onafterprint="logPrintEvent()" style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Document Print Tracking</h1>
<p>This document tracks print events for analytics.</p>
<button onclick="window.print()">Print Document</button>
<h3>Print Log:</h3>
<ul id="printLog"></ul>
<script>
let printCount = 0;
function logPrintEvent() {
printCount++;
const timestamp = new Date().toLocaleString();
const logEntry = document.createElement("li");
logEntry.textContent = `Print attempt #${printCount} at ${timestamp}`;
document.getElementById("printLog").appendChild(logEntry);
// In a real application, you might send this data to analytics
console.log("Print event logged:", timestamp);
}
</script>
</body>
</html>
Each time the print dialog is closed, a new entry is added to the print log with a timestamp. This technique can be useful for tracking how often documents are printed.
Common Use Cases
The onafterprint event is commonly used for the following purposes −
Style restoration − Restoring original page colors and layouts after print-optimized styling
Analytics tracking − Logging print events for usage statistics
User feedback − Displaying messages or instructions after printing
Resource cleanup − Removing temporary print-specific elements or data
Key Points
When working with the onafterprint event, keep these important points in mind −
The event fires both when printing completes and when the print dialog is canceled
It pairs well with the
onbeforeprintevent for comprehensive print handlingMobile browser support may be limited as many mobile devices don't have traditional printing capabilities
The event is most commonly attached to the
<body>element
Conclusion
The onafterprint event attribute provides a reliable way to execute JavaScript code after print operations complete or are canceled. It is particularly useful for restoring page styles, tracking print usage, and providing user feedback after print events.
140 Views
