Print a Web Page with JavaScript and CSS

JavaScript can open the browser's print dialog with window.print(). Use a normal button for the user action rather than automatically forcing the print dialog when the page loads.

<button type="button" id="printPage">Print this page</button>
<script>
document.getElementById('printPage').addEventListener('click', () => window.print());
</script>

Print-specific CSS Top ↑

Use an @media print stylesheet to hide controls or adjust layout for paper/PDF output.

@media print {
  .no-print { display: none; }
  body { font-size: 12pt; }
}

What window.print() controls Top ↑

It opens the browser/operating-system print interface. Your script does not silently select a printer, confirm printing or guarantee that the user will print rather than cancel or save as PDF.

Avoid print-on-load Top ↑

Calling print automatically during page load interrupts visitors and can be especially frustrating when they followed a normal navigation link. Give the user an explicit Print control instead.

HTML body CSS fonts

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: