Anything with .no-print will be hidden when printing.

4. Printing Only a Div Without New Window (Cleaner Method)

Instead of opening a new window, temporarily replace page content:

function printDiv() {
  const originalContent = document.body.innerHTML;
  const printContent = document.getElementById("printArea").innerHTML;

  document.body.innerHTML = printContent;
  window.print();
  document.body.innerHTML = originalContent;
}

⚠️ Use carefully—this can reset JavaScript state on the page.

5. Printing Dynamically Generated Content

Example: generating a report before printing.

function printReport(data) {
  let html = `
    <h1>Sales Report</h1>
    <ul>
  `;

  data.forEach(item => {
    html += `<li>${item.name}: ₦${item.amount}</li>`;
  });

  html += "</ul>";

  const win = window.open("", "", "width=800,height=600");
  win.document.write(html);
  win.document.close();
  win.print();
}

6. Printing PDFs (Advanced Option)

If you want better control (recommended for invoices, receipts), generate a PDF first using libraries like:

• jsPDF
• pdf-lib

Example with jsPDF:

import jsPDF from "jspdf";

const doc = new jsPDF();
doc.text("Hello World", 10, 10);
doc.save("document.pdf");

Then the user prints the downloaded file.

Best Practices

• Always use @media print for layout control
• Hide navigation bars, buttons, and ads during print
• Avoid opening too many popup windows
• Prefer PDF generation for complex documents
• Test across browsers (Chrome behaves best for printing)

Summary

• window.print() → simplest way to print everything
• CSS @media print → controls layout
• New window approach → prints specific sections
• PDF libraries → best for professional documents