Making a “Print This Page” Button
Table of Contents
- Introduction
- Understanding the Print Functionality
- Setting Up the HTML Structure
- Styling the Page with CSS
- Implementing Print Functionality with JavaScript and jQuery
- Customizing the Print View
- Handling Print Styles with CSS
- Advanced Features for Print Customization
- Testing the Print Button
- Optimizing for Different Browsers
- Conclusion
1. Introduction
Printing a webpage is a common requirement in web applications, especially for generating receipts, reports, invoices, or user-friendly printouts of content. In this guide, we will implement a “Print This Page” button using HTML, CSS, JavaScript, and jQuery.
We will also explore how to customize the print output and apply print-specific styles to improve the user experience.
By the end of this tutorial, you will have a fully functional print button that allows users to print only the necessary parts of a webpage.
2. Understanding the Print Functionality
The window.print() method in JavaScript allows users to print the current webpage. This method is simple to use and does not require any additional plugins.
However, using window.print() alone will print the entire page, which may not always be desirable. We will customize the print behavior to allow printing only specific content sections and exclude unnecessary elements (like navigation bars and footers).
3. Setting Up the HTML Structure
We need a simple HTML structure containing a Print button and some sample content for printing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print This Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Printable Content</h1>
<p>This is an example of a page that can be printed.</p>
<!-- Print Button -->
<button id="printButton">Print This Page</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Explanation:
- We include a heading and some sample text.
- A Print This Page button (
#printButton) triggers the print function. - jQuery is included for better script handling.
- The JavaScript and CSS files are linked for functionality and styling.
4. Styling the Page with CSS
The page needs some basic styles to look presentable.
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
button {
background-color: #007BFF;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background-color: #0056b3;
}
5. Implementing Print Functionality with JavaScript and jQuery
We will now use jQuery to attach a click event to the Print button and trigger the print functionality.
$(document).ready(function () {
$("#printButton").click(function () {
window.print();
});
});
Explanation:
- The jQuery
$(document).ready()function ensures the script runs only after the page is fully loaded. - When the button is clicked, the
window.print()method is called, which opens the browser’s print dialog.
6. Customizing the Print View
By default, printing will include everything on the webpage. However, we may want to exclude unnecessary elements like navigation menus, buttons, or background images.
To do this, we will use CSS print styles.
7. Handling Print Styles with CSS
We can define a print-specific CSS file or include styles within our existing CSS using @media print.
@media print {
/* Hide elements that shouldn't appear in print */
button {
display: none;
}
/* Adjust text size for printing */
body {
font-size: 14px;
color: black;
}
}
Explanation:
- Hides the button when printing.
- Ensures readable text by setting a suitable font size.
8. Advanced Features for Print Customization
8.1 Printing Only Specific Sections
If we want to print only a particular section of the page instead of the entire document, we can use jQuery to extract and print specific content.
Modify the HTML to include a div containing the content to print:
<div id="printArea">
<h1>Printable Content</h1>
<p>This is the content that will be printed.</p>
</div>
<button id="printButton">Print This Section</button>
Modify the JavaScript to print only the selected section:
$(document).ready(function () {
$("#printButton").click(function () {
var content = document.getElementById("printArea").innerHTML;
var originalContent = document.body.innerHTML;
document.body.innerHTML = content;
window.print();
document.body.innerHTML = originalContent;
});
});
Explanation:
- Extracts only the content inside
#printArea. - Temporarily replaces the body content with
#printAreafor printing. - After printing, restores the original content.
9. Testing the Print Button
To test the functionality:
- Open the webpage in a browser.
- Click the Print This Page button.
- The browser print dialog should open.
- Verify that unwanted elements (like the button) are hidden.
- If using section-specific printing, ensure only the intended content is printed.
10. Optimizing for Different Browsers
Printing functionality should work across all modern browsers. However, to ensure compatibility:
- Test on Chrome, Firefox, Edge, and Safari.
- Check print preview for consistency.
- Use CSS print styles for better formatting.
- Avoid absolute positioning that may disrupt print layout.
We have successfully created a Print This Page button using jQuery, JavaScript, and CSS.
Key Takeaways:
✅ window.print() allows users to print a webpage easily.
✅ CSS print styles help customize the print layout.
✅ jQuery can restrict printing to specific content.
✅ Optimizing print layouts improves user experience.
This implementation is useful for invoices, reports, and other print-friendly pages.