Invoice Generator Template
Generating Invoice using Pyppeteer
HTML Template Code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Invoice — [Your Company]</title>
<style>
/* Reset + base */
:root{--bg:#f7f9fb;--card:#ffffff;--muted:#6b7280;--accent:#0ea5a4;--surface-shadow:0 2px 10px rgba(16,24,40,0.06)}
*{box-sizing:border-box}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); margin:0; color:#0f172a}
.container{max-width:900px; margin:28px auto; padding:24px}
.card{background:var(--card); border-radius:12px; padding:28px; box-shadow:var(--surface-shadow)}
header{display:flex; justify-content:space-between; gap:20px; align-items:center}
.company{display:flex; gap:16px; align-items:center}
.logo{width:72px; height:72px; border-radius:12px; background:linear-gradient(135deg,var(--accent),#7dd3fc); display:flex; align-items:center; justify-content:center; color:white; font-weight:700}
h1{margin:0; font-size:20px}
.meta{text-align:right}
.meta .muted{color:var(--muted); font-size:13px}
.addresses{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px}
.bill-to p, .from p{margin:4px 0}
table{width:100%; border-collapse:collapse; margin-top:22px}
thead th{background:#f3f4f6; text-align:left; padding:12px; font-size:13px; color:var(--muted)}
tbody td{padding:12px; border-bottom:1px solid #eef2f7; vertical-align:middle}
tfoot td{padding:12px; font-weight:700}
.right{text-align:right}
.center{text-align:center}
.notes{margin-top:18px; color:var(--muted); font-size:13px}
.actions{display:flex; gap:10px; justify-content:flex-end; margin-top:18px}
.btn{padding:8px 14px; border-radius:8px; border:0; cursor:pointer}
.btn-print{background:#111827; color:white}
.btn-download{background:#e6f6f5; color:#064e4b}
/* responsive */
@media (max-width:700px){
.addresses{grid-template-columns:1fr}
header{flex-direction:column; align-items:flex-start}
.meta{text-align:left; margin-top:8px}
}
/* print */
@media print{
body{background:white}
.container{max-width:100%; margin:0; padding:0}
.card{box-shadow:none; border-radius:0; padding:0}
.actions, .btn-download{display:none}
}
</style>
</head>
<body>
<div class="container">
<div class="card" role="document">
<header>
<div class="company">
<div class="logo">YC</div>
<div>
<h1>[Your Company Name]</h1>
<div class="muted">[Street address] • [City, ZIP] • [Country]</div>
<div class="muted">Email: hello@yourcompany.com • Phone: +1 555 555 5555</div>
</div>
</div>
<div class="meta">
<div style="font-size:14px; font-weight:600">INVOICE</div>
<div class="muted">Invoice #: <strong>#INV-0001</strong></div>
<div class="muted">Date: <strong>2025-10-25</strong></div>
<div class="muted">Due: <strong>2025-11-08</strong></div>
</div>
</header>
<section class="addresses">
<div class="from">
<h3 style="margin:0 0 8px 0">From</h3>
<p><strong>[Your Company Name]</strong></p>
<p>[Street address]</p>
<p>[City, ZIP]</p>
<p>Tax ID: [---]</p>
</div>
<div class="bill-to">
<h3 style="margin:0 0 8px 0">Bill To</h3>
<p><strong>[Client Name]</strong></p>
<p>[Client Company]</p>
<p>[Client Address]</p>
<p>Email: client@example.com</p>
</div>
</section>
<table aria-label="Invoice items">
<thead>
<tr>
<th style="width:52%">Description</th>
<th style="width:12%" class="center">Qty</th>
<th style="width:18%" class="right">Unit Price</th>
<th style="width:18%" class="right">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Design & development — Homepage + 3 subpages</td>
<td class="center">1</td>
<td class="right">$1,200.00</td>
<td class="right">$1,200.00</td>
</tr>
<tr>
<td>Monthly maintenance (Oct 2025)</td>
<td class="center">1</td>
<td class="right">$150.00</td>
<td class="right">$150.00</td>
</tr>
<tr>
<td>Extra revisions</td>
<td class="center">2</td>
<td class="right">$25.00</td>
<td class="right">$50.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="right">Subtotal</td>
<td class="right">$1,400.00</td>
</tr>
<tr>
<td colspan="3" class="right">Tax (5%)</td>
<td class="right">$70.00</td>
</tr>
<tr>
<td colspan="3" class="right">Total</td>
<td class="right">$1,470.00</td>
</tr>
</tfoot>
</table>
<div class="notes">
<p><strong>Payment details</strong></p>
<p>Bank: Your Bank • Account: 123456789 • IBAN: XX00 YYYY 0000 0000</p>
<p style="margin-top:8px">Notes: Thank you for your business. Please pay within 14 days. Late payments may be subject to a 2% monthly late fee.</p>
</div>
<div class="actions">
<button class="btn btn-download" id="downloadBtn">Download PDF</button>
<button class="btn btn-print" onclick="window.print()">Print</button>
</div>
</div>
</div>
<script>
// Simple client-side "download as PDF" using print-to-PDF flow is left to the browser.
// If you want a programmatic PDF, integrate a library like html2pdf or send HTML to the server.
document.getElementById('downloadBtn').addEventListener('click', function(){
window.print();
});
</script>
</body>
</html>