Introduction
When developing web applications, there may be situations where you want users to print specific sections of your webpage instead of the entire page. This tutorial will guide you through different methods for printing only selected HTML content upon clicking a button.
Understanding CSS Media Queries
One effective approach involves using CSS media queries to control what appears during screen display versus when printing. The @media print rule allows us to specify styles that apply only in print mode, hiding or showing elements as needed.
Example: Basic Media Query Approach
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Print Specific Content</title>
<style>
@media screen {
.no-print {
display: block;
}
}
@media print {
.no-print {
display: none;
}
#printableArea {
display: block;
}
}
</style>
</head>
<body>
<h1 class="no-print">This will not be printed.</h1>
<div id="printableArea" class="no-print">
<h2>Print Me!</h2>
<p>This content is visible only in the print preview and on paper.</p>
</div>
<button onclick="window.print();">Print Content</button>
</body>
</html>
In this example, the #printableArea becomes visible when printing, while other elements with the class .no-print are hidden.
JavaScript for Dynamic Printing
If you need more control over what gets printed, using JavaScript to manipulate the DOM can be an effective strategy. This involves temporarily replacing the content of your webpage or opening a new window with only the desired print content.
Example: Using JavaScript for Controlled Printing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Print Content</title>
<script>
function printDiv(divId) {
var printContents = document.getElementById(divId).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
</head>
<body>
<div id="printableArea">
<h2>Print Me!</h2>
<p>This content is printable via JavaScript.</p>
</div>
<button onclick="printDiv('printableArea')">Print Specific Content</button>
</body>
</html>
Here, the function printDiv replaces the body’s contents with only the specified section before printing and restores the original page afterward.
Opening a New Window for Printing
Another approach is to use JavaScript to open a new window containing the content you want to print. This method allows users to preview what will be printed and maintain their current session on the main webpage.
Example: Using New Window for Print Preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Print via New Window</title>
<script>
function Popup(data) {
var printWindow = window.open('', 'Print', 'height=600,width=800');
printWindow.document.write('<html><head><title>Print Preview</title></head><body>');
printWindow.document.write(data);
printWindow.document.write('</body></html>');
printWindow.print();
printWindow.close();
}
function PrintElem(elem) {
var content = document.getElementById(elem).innerHTML;
Popup(content);
}
</script>
</head>
<body>
<div id="contentToPrint">
<h2>Print Me!</h2>
<p>This section will be printed in a new window.</p>
</div>
<button onclick="PrintElem('contentToPrint')">Print via New Window</button>
</body>
</html>
In this script, the Popup function opens a new browser tab or window containing the specified content, which users can then print.
Conclusion
This tutorial covered several methods for printing specific HTML content from your webpage. Depending on your requirements and constraints, you might prefer using CSS media queries for simple use cases or JavaScript for more dynamic control. Experiment with these techniques to find what works best for your project’s needs.
Remember to test across different browsers to ensure compatibility, as print behavior can vary slightly between them.