How to print a page in JavaScript with window.print()

How do you print in JavaScript?

Short answer: to print the page, call window.print(). It opens the browser's print dialog, the same one you get with Ctrl + P (Cmd + P on macOS):

<button onclick="window.print()">Print</button>

If by "print" you mean showing a value while you code, use console.log(): it writes to the browser console or the terminal.

console.log("Hello");  // Hello

window.print() opens the print dialog and @media print decides what the printed page looks like.

Every way to print in JavaScript

Print the page with window.print()

window.print() takes no arguments and returns nothing. It opens the print dialog for the current page, where the user chooses a printer or Save as PDF:

<button id="print-btn">Print invoice</button>
 
<script>
  document.getElementById("print-btn").addEventListener("click", () => {
    window.print();
  });
</script>

A few things to know:

• JavaScript can't print without the dialog or choose the printer. The user always confirms.
• Call it from a click or another user action, so the dialog doesn't take the user by surprise. Browsers can block dialogs that open again and again.
• The page waits while the dialog is open: code after window.print() usually runs when the dialog closes.

Choose what gets printed with @media print

The printed page uses the same HTML, but you can change its CSS. Rules inside @media print only apply when printing:

@media print {
  nav, footer, .no-print {
    display: none;   /* hide menus and buttons */
  }
  body {
    font-size: 12pt;
    color: black;
  }
  a::after {
    content: " (" attr(href) ")";   /* show link URLs on paper */
  }
}

Add the class no-print to anything you don't want on paper, such as the Print button itself. To start a new page before an element, use break-before: page;.

Print only part of the page

The simplest way is CSS: hide everything except the part you want while printing.

@media print {
  body * { visibility: hidden; }
  #invoice, #invoice * { visibility: visible; }
  #invoice { position: absolute; left: 0; top: 0; }
}

Then window.print() prints only #invoice. Another option is to open a new window with only that content and print it:

function printSection(id) {
  const html = document.getElementById(id).innerHTML;
  const win = window.open("", "", "width=800,height=600");
  win.document.write(html);
  win.document.close();
  win.focus();
  win.print();
  win.close();
}

This second way loses your page's styles unless you add them to the new window.

Run code before and after printing

The beforeprint and afterprint events let you prepare the page and restore it:

window.addEventListener("beforeprint", () => {
  document.title = "Invoice-1042";   // suggested PDF file name
});
 
window.addEventListener("afterprint", () => {
  console.log("The print dialog was closed");
});

afterprint fires when the dialog closes, whether the user printed or canceled. JavaScript can't tell which one happened.

Print values with console.log()

When you're learning, "print" usually means showing a value to check your code:

const user = { name: "Ana", age: 28 };
 
console.log("Hello");          // Hello
console.log("Age:", user.age); // Age: 28
console.table([user]);         // the object as a table
console.error("Oops");         // shown in red as an error

In the browser, open the console with F12 (or Cmd + Option + J in Chrome on macOS). In Node.js, the output goes to the terminal where you ran node app.js.

To show text on the page itself, change an element instead:

document.getElementById("result").textContent = "Total: $77.00";

Avoid document.write(): if it runs after the page has loaded, it erases the whole page.

Use AI to set up printing

An assistant like ChatGPT, Claude or GitHub Copilot can write the print CSS for your page. These three prompts are ready to copy.

1. Print CSS

This is my HTML: [paste it]. Write a @media print stylesheet that hides [the menu / the buttons /
the footer], fits the content on A4 paper and shows the URLs of the links.

2. Print one section

I want a button that prints only the element with id "[id]" of my page, keeping its styles.
Show me the HTML, CSS and JavaScript, and explain the trade-offs.

3. Fix a print problem

When I print my page with window.print(), [describe the problem: cut tables, missing colors,
blank pages]. This is my CSS: [paste it]. Explain why and fix it.

Check the result in the print preview before you ship it.

Common problems when printing in JavaScript

Related guides

• How to run JavaScript
• How to run JavaScript in VS Code
• How to install JavaScript
• How to get the last element of an array in JavaScript
• What is the difference between Java and JavaScript