JavaScript window.print() Method: Printing Window Content
The window.print() method in JavaScript is a simple yet powerful tool that allows you to programmatically trigger the browser’s print dialog, enabling users to easily print the content of the current window. This method is especially useful for creating print-friendly versions of web pages, generating reports, or providing a convenient way for users to obtain a hard copy of important information displayed on the screen.
Purpose of the window.print() Method
The primary purpose of the window.print() method is to:
- Initiate the browser’s print dialog programmatically.
- Allow users to print the current window’s content easily.
- Enable the creation of print-friendly versions of web pages.
- Provide a convenient way to generate hard copies of web content.
Syntax
The syntax for using the window.print() method is straightforward:
window.print();
This method does not accept any arguments. When called, it immediately opens the print dialog in the user’s browser.
Basic Usage
The most basic use case of the window.print() method involves calling it directly from a button click or other user-initiated event.
<!DOCTYPE html>
<html>
<head>
<title>window.print() Example</title>
</head>
<body>
<h1>Print This Page</h1>
<p>Click the button below to print this page.</p>
<button onclick="printPage()">Print</button>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
In this example, clicking the “Print” button will trigger the printPage() function, which calls window.print(), opening the browser’s print dialog.
Creating a Print-Friendly Version
To enhance the printing experience, you can create a print-friendly version of your web page by using CSS media queries to style the page specifically for printing.
<!DOCTYPE html>
<html>
<head>
<title>Print-Friendly Page</title>
<style>
/* Styles for screen display */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
@media print {
/* Styles for printing */
body {
font-size: 12pt;
color: #000;
}
/* Hide elements not needed for printing */
.no-print {
display: none;
}
}
</style>
</head>
<body>
<h1>Print-Friendly Page</h1>
<p>This page is designed to be printer-friendly.</p>
<p class="no-print">
Click the button below to print this page.
</p>
<button class="no-print" onclick="printPage()">Print</button>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
In this example, the CSS @media print rule defines styles that will only be applied when the page is printed. The .no-print class is used to hide elements that are not needed in the printed version of the page, such as the “Print” button itself.
Printing Specific Elements
Sometimes, you may want to print only a specific part of a web page. You can achieve this by creating a separate CSS stylesheet for printing and including only the desired content within a specific container.
<!DOCTYPE html>
<html>
<head>
<title>Print Specific Element</title>
<style>
/* Styles for screen display */
body {
font-family: Arial, sans-serif;
}
@media print {
/* Styles for printing */
body * {
visibility: hidden;
}
.print-section,
.print-section * {
visibility: visible;
}
.print-section {
position: absolute;
left: 0;
top: 0;
}
}
</style>
</head>
<body>
<h1>Print Specific Section</h1>
<p>This is the main content of the page.</p>
<div class="print-section">
<h2>Section to Print</h2>
<p>This section will be printed.</p>
</div>
<button onclick="printPage()">Print Section</button>
<script>
function printPage() {
window.print();
}
</script>
</body>
</html>
In this example, the CSS visibility: hidden is applied to all elements except those within the .print-section container when printing. This ensures that only the content within the specified container is printed.
Printing Canvas Content
The window.print() method can also be used to print the contents of an HTML canvas element. This is useful for generating printable graphics, charts, or diagrams.
<!DOCTYPE html>
<html>
<head>
<title>Print Canvas Content</title>
</head>
<body>
<h1>Print Canvas Content</h1>
<canvas
id="printCanvas"
width="200"
height="100"
style="border: 1px solid black;"
></canvas>
<button onclick="printCanvas()">Print Canvas</button>
<script>
const print_canvas = document.getElementById("printCanvas");
const print_ctx = print_canvas.getContext("2d");
print_ctx.fillStyle = "skyblue";
print_ctx.fillRect(20, 20, 160, 60);
function printCanvas() {
window.print();
}
</script>
</body>
</html>
This code will print the canvas element along with the rest of the page.
Example using separate Canvas and Output
<!DOCTYPE html>
<html>
<head>
<title>Print Canvas Content</title>
</head>
<body>
<h1>Print Canvas Content</h1>
<canvas
id="printCanvasSeparate"
width="200"
height="100"
style="border: 1px solid black;"
></canvas>
<button onclick="printCanvasSeparate()">Print Canvas</button>
<script>
const print_canvas_separate = document.getElementById(
"printCanvasSeparate"
);
const print_ctx_separate = print_canvas_separate.getContext("2d");
print_ctx_separate.fillStyle = "skyblue";
print_ctx_separate.fillRect(20, 20, 160, 60);
function printCanvasSeparate() {
window.print();
}
</script>
</body>
</html>
In this example, the JavaScript code first draws a blue rectangle on the canvas. When the “Print Canvas” button is clicked, the printCanvas() function is called, which triggers the window.print() method, opening the browser’s print dialog.
Note: The window.print() method relies on the browser’s print functionality, so the actual appearance of the printed output may vary depending on the user’s printer settings and browser configurations. ⚠️
Advanced Techniques
Before and After Print Events
You can use the beforeprint and afterprint events to execute JavaScript code before and after the print dialog is shown. This can be useful for modifying the page content or displaying a message to the user.
<!DOCTYPE html>
<html>
<head>
<title>Before and After Print Events</title>
</head>
<body>
<h1>Before and After Print Events</h1>
<p id="printMessage">Click the button below to print this page.</p>
<button onclick="printPageEvents()">Print</button>
<script>
function printPageEvents() {
window.print();
}
window.addEventListener("beforeprint", function (event) {
document.getElementById("printMessage").textContent =
"Preparing to print...";
});
window.addEventListener("afterprint", function (event) {
document.getElementById("printMessage").textContent =
"Click the button below to print this page.";
});
</script>
</body>
</html>
In this example, the beforeprint event listener changes the text of the printMessage element to “Preparing to print…” before the print dialog is shown, and the afterprint event listener resets the text to its original value after the print dialog is closed.
Practical Applications
The window.print() method is valuable in various real-world scenarios:
- Generating Reports: Allow users to print reports or summaries of data displayed on the screen.
- Printing Invoices: Provide a convenient way for customers to print invoices or receipts.
- Creating Printable Tickets: Enable users to print tickets or boarding passes for events or travel.
- Documenting Information: Offer a simple method for users to create hard copies of important information, such as instructions or guidelines.
Browser Support
The window.print() method is widely supported by all modern web browsers, ensuring consistent functionality across different platforms.
| Browser | Version | Support |
| :————- | :—— | :—— |
| Chrome | All | Yes |
| Firefox | All | Yes |
| Safari | All | Yes |
| Edge | All | Yes |
| Opera | All | Yes |
| Internet Explorer | 6+ | Yes |
Note: While the window.print() method is broadly supported, the appearance of the printed output may vary depending on the browser’s print settings and the user’s printer configurations. Always test your print-friendly styles across different browsers and devices to ensure a consistent experience. 🧐
Conclusion
The JavaScript window.print() method is a versatile and easy-to-use tool for triggering the browser’s print dialog and enabling users to print web page content. By leveraging CSS media queries and event listeners, you can create print-friendly versions of your web pages and provide a seamless printing experience for your users.
