Skip to main content

​
Report Generation

Generate PDF reports with charts, tables, and dynamic data.

​
Report Template

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      padding: 40px;
      color: #1a1a1a;
    }
    .header {
      border-bottom: 3px solid #f05335;
      padding-bottom: 20px;
      margin-bottom: 30px;
    }
    h1 { margin: 0; color: #1a1a1a; }
    .date { color: #666; font-size: 14px; }
    .metrics {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 40px;
    }
    .metric {
      background: #f8f9fa;
      padding: 20px;
      border-radius: 8px;
    }
    .metric-value { font-size: 32px; font-weight: bold; }
    .metric-label { font-size: 12px; color: #666; text-transform: uppercase; }
    .chart-container {
      height: 300px;
      margin-bottom: 40px;
    }
    table { width: 100%; border-collapse: collapse; }
    th, td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid #eee;
    }
    th {
      background: #f8f9fa;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>Monthly Performance Report</h1>
    <p class="date">Generated on {{report_date}}</p>
  </div>

  <div class="metrics">
    <div class="metric">
      <div class="metric-value">{{total_conversions}}</div>
      <div class="metric-label">Total Conversions</div>
    </div>
    <div class="metric">
      <div class="metric-value">{{success_rate}}%</div>
      <div class="metric-label">Success Rate</div>
    </div>
    <div class="metric">
      <div class="metric-value">{{avg_time}}s</div>
      <div class="metric-label">Avg Response Time</div>
    </div>
    <div class="metric">
      <div class="metric-value">{{active_users}}</div>
      <div class="metric-label">Active Users</div>
    </div>
  </div>

  <h2>Usage Over Time</h2>
  <div class="chart-container">
    <canvas id="usageChart"></canvas>
  </div>

  <h2>Top Endpoints</h2>
  <table>
    <thead>
      <tr>
        <th>Endpoint</th>
        <th>Requests</th>
        <th>Avg Latency</th>
        <th>Error Rate</th>
      </tr>
    </thead>
    <tbody>
      {{#each endpoints}}
      <tr>
        <td>{{name}}</td>
        <td>{{requests}}</td>
        <td>{{latency}}ms</td>
        <td>{{error_rate}}%</td>
      </tr>
      {{/each}}
    </tbody>
  </table>

  <script>
    const ctx = document.getElementById('usageChart').getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: {{chart_labels}},
        datasets: [{
          label: 'API Requests',
          data: {{chart_data}},
          borderColor: '#f05335',
          tension: 0.3
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        animation: false // Important for PDF rendering
      }
    });
  </script>
</body>
</html>

​
Python Example with Charts

import requests
import json
from datetime import datetime, timedelta

# Generate report data
report_data = {
    "report_date": datetime.now().strftime("%B %d, %Y"),
    "total_conversions": "12,847",
    "success_rate": "99.2",
    "avg_time": "2.3",
    "active_users": "1,234",
    "endpoints": [
        {"name": "/pdf/", "requests": "8,234", "latency": "2100", "error_rate": "0.5"},
        {"name": "/conversions/", "requests": "4,613", "latency": "45", "error_rate": "0.1"},
    ],
    "chart_labels": json.dumps(["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]),
    "chart_data": json.dumps([1200, 1900, 1700, 2100, 2400, 800, 600])
}

# Render template with data
from jinja2 import Template
with open("report_template.html") as f:
    template = Template(f.read())
html = template.render(**report_data)

# Generate PDF
response = requests.post(
    "https://api.pdflet.dev/api/v1/pdf/",
    headers={"X-API-Key": "pk_live_your_api_key"},
    json={
        "html": html,
        "page_size": "A4",
        "landscape": True,
        "print_background": True
    }
)

print(response.json())

​
Tips for Reports

Set animation: false in Chart.js options to ensure charts render correctly in PDFs.
  • Use CDN scripts - External scripts are loaded before rendering
  • Landscape for dashboards - Wide reports work better in landscape
  • Print backgrounds - Enable print_background for colored elements
  • Page breaks - Use page-break-before: always for multi-page reports