Weekly report HTML template with KPIs

A one-page weekly business report in HTML: KPI cards, a CSS bar chart, a channel table and highlights. Ready to render to PDF automatically.

Convert this to PDF → Download .html

Paper: A4 · preview scaled to fit

Render it with the API

curl https://html-pdf.com/v1/pdf \
  -H "Authorization: Bearer $HTML_PDF_KEY" \
  -F "index.html=@report.html" \
  -F 'options={"prefer_css_page_size": true}' \
  -o report.pdf

Or ask your AI agent: "Make me a report PDF using the html-pdf.com report template." · Guides · API reference

Tips

The bar chart is pure CSS, no JavaScript needed. For Chart.js, add "wait_delay": 1.
Add footer_html with page numbers for multi-page reports.
Schedule it from n8n or Zapier to email the PDF every Monday.

HTML source

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Weekly report, week 41, 2026</title>
<style>
  @page { size: A4; margin: 18mm 16mm; }
  * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; font-size: 12px; line-height: 1.55; margin: 0; }
  header { border-bottom: 2px solid #111; padding-bottom: 12px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; }
  h1 { font-size: 24px; margin: 0; letter-spacing: -0.02em; }
  h2 { font-size: 14px; margin: 28px 0 10px; break-after: avoid; }
  .muted { color: #666; }
  .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; break-inside: avoid; }
  .kpi { border: 1px solid #ddd; padding: 12px; }
  .kpi b { display: block; font-size: 22px; letter-spacing: -0.02em; }
  .up { color: #0a7d36; } .down { color: #b3261e; }
  .bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; border-bottom: 1px solid #111; padding: 0 4px; break-inside: avoid; }
  .bars div { flex: 1; background: #111; }
  .days { display: flex; gap: 8px; padding: 4px; font-size: 10px; color: #888; }
  .days span { flex: 1; text-align: center; }
  table { width: 100%; border-collapse: collapse; }
  th, td { text-align: left; padding: 7px 0; border-bottom: 1px solid #eee; }
  th { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #888; }
  .r { text-align: right; }
  ul { padding-left: 18px; margin: 0; }
  .page-break { break-before: page; }
  @media screen {
    html { background: #e9e9e7; }
    body { width: 210mm; min-height: 297mm; margin: 24px auto; padding: 18mm 16mm; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.06); box-sizing: border-box; }
  }
</style>
</head>
<body>
  <header>
    <div><h1>Weekly report</h1><div class="muted">Acme Inc. · Growth team</div></div>
    <div class="muted">Week 41 · Oct 5–11, 2026</div>
  </header>

  <div class="kpis">
    <div class="kpi"><span class="muted">Revenue</span><b>$48.2k</b><span class="up">▲ 8.4%</span></div>
    <div class="kpi"><span class="muted">New customers</span><b>312</b><span class="up">▲ 5.1%</span></div>
    <div class="kpi"><span class="muted">Churn</span><b>1.9%</b><span class="down">▲ 0.2 pt</span></div>
    <div class="kpi"><span class="muted">NPS</span><b>54</b><span class="up">▲ 3</span></div>
  </div>

  <h2>Daily signups</h2>
  <div class="bars"><div style="height:45%"></div><div style="height:62%"></div><div style="height:58%"></div><div style="height:80%"></div><div style="height:71%"></div><div style="height:38%"></div><div style="height:30%"></div></div>
  <div class="days"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>

  <h2>Top channels</h2>
  <table>
    <thead><tr><th>Channel</th><th class="r">Visitors</th><th class="r">Signups</th><th class="r">Conversion</th></tr></thead>
    <tr><td>Organic search</td><td class="r">18,420</td><td class="r">142</td><td class="r">0.77%</td></tr>
    <tr><td>Direct</td><td class="r">9,310</td><td class="r">88</td><td class="r">0.95%</td></tr>
    <tr><td>Referral</td><td class="r">4,205</td><td class="r">51</td><td class="r">1.21%</td></tr>
    <tr><td>Paid social</td><td class="r">3,880</td><td class="r">31</td><td class="r">0.80%</td></tr>
  </table>

  <h2>Highlights</h2>
  <ul>
    <li>Launched the new pricing page; checkout conversion up 12% week over week.</li>
    <li>Two enterprise trials started (Globex, Initech).</li>
    <li>Support backlog cleared: median first response 41 minutes.</li>
  </ul>

  <h2>Next week</h2>
  <ul>
    <li>Ship onboarding checklist to 50% of new accounts.</li>
    <li>Publish three comparison pages.</li>
  </ul>
</body>
</html>

More templates

Invoice · Receipt · Certificate · Resume · Proposal · Packing slip · Shipping label · Event ticket · Quote · Purchase order · Timesheet · all templates