We use cookies
We use cookies to enhance your experience and analyse site usage.
Formal invoice with billing/shipping addresses, payment terms, and bank details.
<!DOCTYPE html>
<html>
<head>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Georgia, serif; color: #1a1a1a; padding: 40px; }
.letterhead { border-bottom: 3px solid #1e3a5f; padding-bottom: 20px; margin-bottom: 32px; display: flex; justify-content: space-between; align-items: flex-end; }
.company-name { font-size: 24px; font-weight: bold; color: #1e3a5f; }
.invoice-title { font-size: 32px; font-weight: bold; color: #1e3a5f; text-align: right; }
.invoice-number { font-size: 14px; color: #666; text-align: right; margin-top: 4px; }
.addresses { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.addr-block label { font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: .1em; color: #999; display: block; margin-bottom: 8px; }
.addr-block p { font-size: 13px; line-height: 1.7; }
table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
th { background: #1e3a5f; color: white; padding: 10px 14px; font-size: 12px; text-align: left; }
th:last-child, td:last-child { text-align: right; }
td { padding: 10px 14px; font-size: 13px; border-bottom: 1px solid #eee; }
tr:nth-child(even) td { background: #f9fafb; }
.summary { display: flex; justify-content: flex-end; margin-bottom: 32px; }
.summary-table { width: 280px; font-size: 13px; }
.summary-table tr td { padding: 6px 12px; border: none; }
.summary-table .grand-total td { font-weight: bold; font-size: 15px; border-top: 2px solid #1e3a5f; color: #1e3a5f; }
.terms { background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 4px; padding: 16px; font-size: 12px; color: #666; }
.terms h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; color: #333; }
</style>
</head>
<body>
<div class="letterhead">
<div>
<div class="company-name">{{company_name}}</div>
<p style="font-size:13px;color:#666;margin-top:6px;">{{company_address}}<br>{{company_email}} · {{company_phone}}</p>
</div>
<div>
<div class="invoice-title">INVOICE</div>
<div class="invoice-number">{{invoice_number}}<br>Date: {{issue_date}}<br>Due: {{due_date}}</div>
</div>
</div>
<div class="addresses">
<div class="addr-block"><label>From</label><p>{{company_name}}<br>{{company_address}}</p></div>
<div class="addr-block"><label>Bill To</label><p>{{client_name}}<br>{{billing_address}}</p></div>
<div class="addr-block"><label>Ship To</label><p>{{ship_to_name}}<br>{{shipping_address}}</p></div>
</div>
<table>
<thead><tr><th>#</th><th>Description</th><th>Qty</th><th>Unit Price</th><th>Total</th></tr></thead>
<tbody>{{items}}</tbody>
</table>
<div class="summary">
<table class="summary-table">
<tr><td>Subtotal</td><td align="right">{{subtotal}}</td></tr>
<tr><td>Discount</td><td align="right">-{{discount}}</td></tr>
<tr><td>Tax ({{tax_rate}}%)</td><td align="right">{{tax}}</td></tr>
<tr class="grand-total"><td>Total Due</td><td align="right">{{total}}</td></tr>
</table>
</div>
<div class="terms">
<h4>Payment Terms & Bank Details</h4>
<p>{{payment_terms}} · Bank: {{bank_name}} · Account: {{account_number}} · Routing: {{routing_number}}</p>
<p style="margin-top:8px;">{{terms_and_conditions}}</p>
</div>
</body>
</html>Sign in to open this template in the playground, or copy the HTML and use it with the API.
curl -X POST https://api.htmlpdf.dev/api/pdf \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"html": "<!DOCTYPE html>\n<html>\n<head>\n<style>\n * { box-sizing: border-box; margin: 0; p...",
"format": "A4"
}' \
--output detailed-invoice.pdf