Developer ToolsPxShot ↗

How to Create PDF Reports from Web Pages Using a Screenshot API

February 5, 2026 6 min read

Your client wants a weekly report. Your manager needs a printable summary of the analytics dashboard. Your operations team needs invoices generated from a web template. In all these cases, you need to turn a web page into a clean PDF — and you need it to happen automatically.

A screenshot API makes this surprisingly simple. Instead of wrangling PDF libraries and fighting with layout engines, you can render your report as a web page (where you have full control over the design) and capture it as a PDF or high-resolution image.

Why Generate PDFs from Web Pages?

Traditional PDF generation involves libraries like wkhtmltopdf, Puppeteer, or language-specific tools like ReportLab (Python) or iText (Java). These work, but they come with baggage:

Complex template syntax that's nothing like the CSS you already know
Font rendering inconsistencies across environments
Layout engines that don't support modern CSS (flexbox, grid)
Heavy binary dependencies that bloat your deployment

The modern approach: design your report in HTML and CSS (where you have full control), then convert it using a screenshot or rendering API. You get pixel-perfect output with modern CSS support, and zero dependencies in your codebase.

Building a Report Template

The first step is creating an HTML template for your report. Since this is just a web page, you can use any CSS features you want — flexbox, grid, gradients, web fonts, even charts rendered with a library like Chart.js:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 40px;
      color: #1a1a1a;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px solid #8224e3;
      padding-bottom: 20px;
      margin-bottom: 30px;
    }
    .metric-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin: 24px 0;
    }
    .metric-card {
      background: #f8f9fa;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
    }
    .metric-value {
      font-size: 32px;
      font-weight: 800;
      color: #8224e3;
    }
    .metric-label {
      font-size: 13px;
      color: #666;
      margin-top: 4px;
    }
  </style>
</head>
<body>
  <div class="header">
    <div>
      <h1>Monthly Performance Report</h1>
      <p>January 2026 — Acme Corp</p>
    </div>
    <img src="https://yoursite.com/logo.png" height="40" />
  </div>
  <div class="metric-grid">
    <div class="metric-card">
      <div class="metric-value">12,847</div>
      <div class="metric-label">Page Views</div>
    </div>
    <div class="metric-card">
      <div class="metric-value">3.2%</div>
      <div class="metric-label">Conversion Rate</div>
    </div>
    <div class="metric-card">
      <div class="metric-value">$24,500</div>
      <div class="metric-label">Revenue</div>
    </div>
  </div>
  <!-- More report content -->
</body>
</html>

Generating the PDF via Screenshot API

With your template ready, use a screenshot API to capture it. You can either host the template as a URL or pass the raw HTML directly. Here's how to do it with PxShot:

async function generateReport(reportData: ReportData) {
  // Inject dynamic data into template
  const html = buildReportHtml(reportData);

  const response = await fetch("https://pxshot.dev/api/screenshot", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer YOUR_API_KEY"
    },
    body: JSON.stringify({
      html,
      width: 800,
      fullPage: true,
      format: "png",      // or "pdf" when supported
      deviceScaleFactor: 2 // retina quality
    })
  });

  return await response.arrayBuffer();
}

// Usage: send report as email attachment
const reportPdf = await generateReport({
  client: "Acme Corp",
  period: "January 2026",
  metrics: { views: 12847, conversion: 3.2, revenue: 24500 }
});

await sendEmail({
  to: "client@acme.com",
  subject: "Your January Report",
  attachments: [{ filename: "report-jan-2026.png", content: reportPdf }]
});

Use Cases for Web-to-PDF

📊

Client Reports

Generate branded weekly or monthly reports from your analytics dashboard and email them to clients automatically. No manual work.

🧾

Invoices

Design beautiful invoices in HTML/CSS, populate with order data, and generate PDFs for download or email.

📋

Documentation Snapshots

Capture your API documentation or internal wiki pages as PDFs for offline access or compliance archiving.

📈

Dashboard Snapshots

Schedule daily snapshots of dashboards for stakeholders who prefer email digests over logging into tools.

Tips for Better Report Output

Use deviceScaleFactor: 2 for retina-quality output. Reports look sharper when printed or viewed on high-DPI screens.
Set explicit widths. Use a fixed width (like 800px) to ensure consistent layout regardless of the capture environment.
Use fullPage: true to capture the entire page, not just the viewport. Essential for multi-page reports.
Embed fonts. Use Google Fonts or inline your font files to ensure consistent typography.
Add print-friendly CSS. Hide navigation, footers, and other UI chrome in your report template.

Generate Reports with PxShot

PxShot captures any web page or HTML template as a high-resolution image. Perfect for generating client reports, invoices, and documentation snapshots. Free tier includes 100 captures per month.

Try PxShot Free →

Need automated report generation for your business? Let's talk — we build custom reporting and automation systems.

pdf generationscreenshot apireportsautomationweb scraping