Receipt HTML template (80 mm thermal)

An 80 mm thermal-printer style receipt in HTML and CSS. Convert it to a narrow PDF for email receipts or point-of-sale printing.

Convert this to PDF → Download .html

Paper: 80 × 200 mm · 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=@receipt.html" \
  -F 'options={"prefer_css_page_size": true}' \
  -o receipt.pdf

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

Tips

The page size comes from CSS @page { size: 80mm 200mm }, so send "prefer_css_page_size": true.
Monospace fonts keep columns aligned like a real till receipt.
For variable length, set the height generously; empty space at the bottom is fine for thermal printers.

HTML source

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Receipt #1042</title>
<style>
  @page { size: 80mm 200mm; margin: 6mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: #111; margin: 0; }
  .c { text-align: center; }
  h1 { font-size: 15px; margin: 0; }
  hr { border: 0; border-top: 1px dashed #999; margin: 10px 0; }
  table { width: 100%; border-collapse: collapse; }
  td { padding: 2px 0; vertical-align: top; }
  .r { text-align: right; }
  .total td { font-size: 14px; font-weight: 700; padding-top: 6px; }
  .muted { color: #666; }
  @media screen {
    html { background: #e9e9e7; }
    body { width: 80mm; min-height: 200mm; margin: 24px auto; padding: 6mm; 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>
  <div class="c">
    <h1>CAFÉ EXAMPLE</h1>
    <div class="muted">Carrer de Example 1, Barcelona<br>NIF B12345678</div>
  </div>
  <hr>
  <div>Receipt #1042<br>10/10/2026 · 09:41</div>
  <hr>
  <table>
    <tr><td>2 × Flat white</td><td class="r">7.00</td></tr>
    <tr><td>1 × Croissant</td><td class="r">2.50</td></tr>
    <tr><td>1 × Orange juice</td><td class="r">3.80</td></tr>
  </table>
  <hr>
  <table>
    <tr><td class="muted">Subtotal</td><td class="r">12.09</td></tr>
    <tr><td class="muted">VAT 10%</td><td class="r">1.21</td></tr>
    <tr class="total"><td>TOTAL €</td><td class="r">13.30</td></tr>
    <tr><td class="muted">Card •••• 4242</td><td class="r">13.30</td></tr>
  </table>
  <hr>
  <div class="c">Thank you!<br><span class="muted">example.com</span></div>
</body>
</html>

More templates

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