Printing on Paper

Printing on Paper

print() opens the print dialog for the current document, like Ctrl+P. Paper layout belongs in CSS: @media print (@media), printer selectors (Printer Selectors) and @page (@page). JavaScript handles the rest through the beforeprint and afterprint events, Baseline since 2019.

Expanding collapsed content for printingJavaScript

const expanded = [];
addEventListener('beforeprint', () => document.querySelectorAll('details:not([open])')
  .forEach((d) => { d.open = true; expanded.push(d); }));
addEventListener('afterprint', () => expanded.splice(0).forEach((d) => { d.open = false; }));
document.querySelector('#print-btn').addEventListener('click', () => print());

To print another document, such as an invoice, without showing it, load it into a hidden same-origin <iframe> and call frame.contentWindow.print() after it loads. For server-generated PDFs, Puppeteer 164,069 or Playwright 26,280 's page.pdf() applies the same print CSS.

MENU