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 before the document is printed in HTML?
The onbeforeprint attribute in HTML is an event handler that executes a JavaScript function before a document is printed. This attribute triggers when the user attempts to print the page through browser print functionality (Ctrl+P, File ? Print, or print button), displaying custom messages or performing actions before the print dialog appears.
The onbeforeprint event is commonly used together with the onafterprint attribute to handle print preparation and cleanup tasks. It belongs to the HTML event attributes category and can be applied to the <body> element or used with JavaScript event listeners.
Syntax
Following is the syntax for the onbeforeprint attribute −
<body onbeforeprint="functionName()"> <!-- page content --> </body>
Alternatively, you can use JavaScript to add the event listener −
window.addEventListener("beforeprint", functionName);
Using onbeforeprint Attribute
The onbeforeprint attribute allows you to execute custom scripts before the print process begins. This is useful for showing confirmation dialogs, modifying content for print formatting, or logging print activities.
Example − Basic Alert Before Printing
Following example demonstrates the onbeforeprint attribute with a simple alert −
<!DOCTYPE html>
<html>
<head>
<title>Before Print Example</title>
</head>
<body onbeforeprint="mytutorial()" style="font-family: Arial, sans-serif; padding: 20px;">
<h1>MS DHONI</h1>
<h2>Finishes off in his Style.</h2>
<p>Press Ctrl+P to trigger the print event.</p>
<script>
function mytutorial() {
alert("Sure To Print!");
}
</script>
</body>
</html>
When the user attempts to print this page (using Ctrl+P or File ? Print), an alert dialog appears with "Sure To Print!" before the browser's print dialog opens −
MS DHONI Finishes off in his Style. Press Ctrl+P to trigger the print event. (Alert appears: "Sure To Print!" when printing)
Example − Confirmation Dialog
Following example shows a more informative confirmation dialog −
<!DOCTYPE html>
<html>
<head>
<title>Print Confirmation</title>
</head>
<body onbeforeprint="display()" style="font-family: Arial, sans-serif; padding: 20px;">
<h1>TUTORIALSPOINT</h1>
<p>Welcome to our HTML tutorial section. This page demonstrates the onbeforeprint event.</p>
<p><strong>Try printing this page to see the event in action!</strong></p>
<script>
function display() {
alert("The document will now print.");
}
</script>
</body>
</html>
The output displays the webpage content normally, and when the user attempts to print, an alert message "The document will now print." appears first −
TUTORIALSPOINT Welcome to our HTML tutorial section. This page demonstrates the onbeforeprint event. Try printing this page to see the event in action! (Alert appears: "The document will now print." when printing)
Using JavaScript Event Listener
Instead of using the HTML attribute, you can attach the event listener using JavaScript, which provides more flexibility and follows modern web development practices.
Example − JavaScript Event Listener
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Print Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Print Event with JavaScript</h1>
<p>This page uses JavaScript addEventListener for the beforeprint event.</p>
<button onclick="window.print()">Print This Page</button>
<script>
window.addEventListener("beforeprint", function() {
alert("Preparing to print... Please wait.");
});
window.addEventListener("afterprint", function() {
alert("Printing completed or cancelled.");
});
</script>
</body>
</html>
This example uses both beforeprint and afterprint events to show messages before and after the print process −
Print Event with JavaScript This page uses JavaScript addEventListener for the beforeprint event. [Print This Page] (Before print: "Preparing to print... Please wait.") (After print: "Printing completed or cancelled.")
Practical Use Cases
The onbeforeprint event can be used for various practical purposes −
Content modification − Hide or show specific elements for print version
User confirmation − Ask users to confirm before printing large documents
Analytics tracking − Log print events for usage statistics
Print optimization − Apply print-specific styling or formatting
Example − Hiding Elements Before Print
<!DOCTYPE html>
<html>
<head>
<title>Hide Elements on Print</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Document Title</h1>
<div id="navigation">
<p>Navigation Menu (will be hidden when printing)</p>
</div>
<div id="content">
<p>This is the main content that will be printed.</p>
</div>
<button onclick="window.print()">Print Document</button>
<script>
window.addEventListener("beforeprint", function() {
document.getElementById("navigation").style.display = "none";
});
window.addEventListener("afterprint", function() {
document.getElementById("navigation").style.display = "block";
});
</script>
</body>
</html>
This example hides the navigation menu before printing and restores it after the print process is complete.
Browser Compatibility
The onbeforeprint event is supported in most modern browsers including Chrome, Firefox, Safari, and Edge. However, the event may not trigger in all print scenarios (such as programmatic printing), so it should be used as an enhancement rather than a critical functionality.
Conclusion
The onbeforeprint attribute provides a simple way to execute JavaScript code before a document is printed. Whether used for user confirmation, content modification, or analytics tracking, this event handler enhances the printing experience by allowing developers to prepare the document appropriately before the print dialog appears.
416 Views
