JavaScript Window print() Method

What You’ll Learn

The print() method opens the browser’s print dialog for the current page. This tutorial covers syntax, print buttons, @media print CSS, beforeprint / afterprint events, five examples, and what JavaScript cannot do (force silent printing).

Introduction

Invoices, receipts, articles, and reports often need a paper or PDF copy. Browsers already expose printing through the menu or Ctrl+P (Cmd+P on Mac). The window.print() method lets your page offer the same flow from a custom Print button.

Calling print() does not send pages to the printer immediately—it opens the system print dialog where the user chooses printer, pages, and orientation. Your job is to trigger it at the right moment and use CSS so the printed layout looks clean.

Understanding the print() Method

window.print() takes no arguments and returns undefined. It applies to the current browsing context—the visible document in that tab (or in a popup if you call popupWindow.print() on a reference you opened).

Because printing affects the whole window, pair JavaScript with @media print styles to hide menus, sidebars, and buttons that should not appear on paper. The screen view stays the same; only the print preview uses those rules.

📝 Syntax

General form of Window.print():

window.print();
// shorthand (same in browsers):
print();

Parameters

• None.

Return value

• undefined.

Related APIs

• window.addEventListener("beforeprint", fn) — dialog opening.
• window.addEventListener("afterprint", fn) — dialog closed.
• @media print { ... } in CSS — print-only layout.
• iframe.contentWindow.print() — print iframe document (same-origin).

Examples Gallery

Use the Try-it links to open the print dialog from a button. Preview print layout with the browser’s print preview (Ctrl+P or the dialog’s preview pane).

function printPage() {
  window.print();
}

// User clicks Print → print dialog opens
printPage();

Browser print dialog opens (user chooses Print or Cancel).

document.getElementById("printBtn").addEventListener("click", function () {
  window.print();
});

Click Print → browser print dialog opens.

@media print {
  .no-print {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }
}

Main article content only — header and Print button hidden.

window.addEventListener("beforeprint", function () {
  console.log("Print dialog opened — expand hidden details if needed.");
});

window.addEventListener("afterprint", function () {
  console.log("Print dialog closed.");
});

Print dialog opened — expand hidden details if needed.
(after close)
Print dialog closed.

<nav class="no-print">Site navigation</nav>

<section class="receipt">
  <h1>Order #1042</h1>
  <p>Total: $24.99</p>
</section>

<button type="button" class="no-print" onclick="window.print()">Print receipt</button>

<style>
  @media print {
    .no-print { display: none; }
  }
</style>

Order #1042
Total: $24.99

🚀 Common Use Cases

• Print this page — articles, documentation, and tutorials.
• Receipts and invoices — order confirmations with print-friendly CSS.
• Tickets and passes — event or boarding details users can print or save as PDF.
• Reports — dashboards with print styles that simplify charts for paper.
• Maps and directions — printable summary of route details.
• Popup print preview — open content in window.open(), then popup.print().

📝 Notes

• JavaScript cannot print silently without the dialog—users must confirm.
• Background colors may not print unless users enable “background graphics” in the dialog.
• Test print layout in Chrome DevTools → Rendering → print media type.
• Long pages: use CSS page-break-inside: avoid on cards and tables where needed.
• Mobile browsers support print() but may route to share/save sheets instead of desktop printers.
• For a dedicated print view, open a minimal popup with window.open() and call print() there.

💡 Best Practices