Putting It All Together: A Practical Example

Let's imagine we have a simple HTML invoice. On the screen, it might have a blue header and some interactive elements. For the PDF, we want a clean, black-and-white A4 document with page numbers.

Here's a simplified version of our print stylesheet:

/* styles.print.css */
@media print {
  body {
    font-family: 'Times New Roman', serif;
    font-size: 12pt;
    color: #000;
  }

  /* Hide navigation and other web-only elements */
  .main-nav, .actions-button, .web-footer {
    display: none;
  }

  /* Define the page box */
  @page {
    size: A4;
    margin: 2cm;

    @bottom-center {
      content: counter(page);
      font-style: italic;
    }
  }

  h1, h2, h3 {
    /* Keep headings with the content that follows */
    break-after: avoid;
  }

  /* Prevent table rows and images from splitting */
  tr, img {
    break-inside: avoid;
  }

  /* Ensure table headers repeat on every new page */
  thead {
    display: table-header-group;
  }
}

By including this CSS, when a user hits Ctrl+P (or Cmd+P), their browser's print preview will instantly transform the webpage into a perfectly formatted document, ready to be saved as a PDF.

The Browser is Your PDF Engine: Headless Automation

Manually printing to PDF is great for users, but what about automated server-side generation? This is where headless browsers come in. Tools like Puppeteer (for Chrome) and Playwright (for multiple browsers) allow you to control a real browser programmatically from your server.

The workflow is beautiful in its elegance:

1. Create a route in your web application that renders the HTML document (e.g., /invoices/123/print-view).
2. Write a simple script that tells the headless browser to visit that URL.
3. Tell the browser to export the page as a PDF.

Here's a quick example using Puppeteer in Node.js:

const puppeteer = require('puppeteer');

async function createPdf(url, outputPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 1. Go to the page
  await page.goto(url, { waitUntil: 'networkidle0' });

  // 2. Generate the PDF
  await page.pdf({
    path: outputPath,
    format: 'A4',
    printBackground: true, // Crucial for including background colors/images
    margin: { top: '2cm', right: '2cm', bottom: '2cm', left: '2cm' }
  });

  await browser.close();
  console.log(`PDF generated at ${outputPath}`);
}

createPdf('http://yourapp.com/invoices/123', 'invoice-123.pdf');

You're using Google Chrome's world-class rendering engine to create your PDF. The result is a high-fidelity document that perfectly matches what you designed with your CSS.

When to Stick with a PDF Library

Is this CSS-based approach a silver bullet? Not always. There are still valid reasons to use a traditional PDF library. Here's a quick comparison:

Conclusion: A Paradigm Shift

For a huge percentage of everyday document generation tasks—invoices, reports, resumes, tickets, and statements—ditching dedicated PDF libraries in favor of modern CSS is a clear win. It simplifies your stack, reduces maintenance overhead, and empowers you to use the web development skills you've already honed.

By treating a PDF as just another output target for your HTML, you embrace the true power and flexibility of the web platform. The next time you're asked to generate a PDF, don't automatically reach for a new dependency. First, ask yourself: can I just build a webpage and print it? The answer, more often than not, is a resounding yes.