Invoice
This HTML code is a webpage template for generating invoices, suitable for conversion to PDF format using the BKHTMLTOPDF tool.
Preview
HTML
HTML Code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>BKHTMLTOPDF Invoice</title>
<style>
* {
margin: 0;
padding: 0;
font-family: 'Inter 18pt', sans-serif;
box-sizing: border-box;
}
@media print {
@page {
size: A4;
margin: 0;
}
}
html, body {
height: 100vh;
width: 100vw;
}
body {
padding: 3rem;
}
table {
border-collapse: collapse;
margin-bottom: 2rem;
width: 100%;
}
.text-sm {
font-size: .75rem;
}
.bg-gray {
background-color: rgba(0, 0, 0, 0.08);
}
table tr td, table tr th {
padding: 0.25rem;
font-size: 0.85rem;
}
</style>
</head>
<body>
<table style="margin-bottom: 4rem">
<tr>
<td align="center">
<img width="50%" src="https://www.bkhtmltopdf.com/img/logo.png" alt="Logo"/>
</td>
</tr>
</table>
<table class="bg-gray">
<tr>
<td><h2>Invoice #123456789</h2></td>
</tr>
<tr>
<td>Invoice Date: 10/10/2025</td>
</tr>
<tr>
<td>Due Date: 10/20/2025</td>
</tr>
</table>
<table>
<tr>
<td>
<h4>Invoiced To</h4>
<p>Tom Smith</p>
<p>SAN ANTONIO</p>
<p>2732 Oakmound Drive</p>
<p>US</p>
</td>
<td align="right">
<div style="width: 80px">
<barcode type="qrcode" value="1234567890123456789" />
<p class="text-sm" style="text-align: center;color: gray">Express</p>
</div>
</td>
</tr>
</table>
<table border="1">
<thead>
<tr class="bg-gray">
<th>Description</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="text-sm">
<td>
<pre>
<b>BKHTMLTOPDF - Invoice Example</b>
For More: www.bkhtmltopdf.com
</pre>
</td>
<td align="center" valign="top">$3.50 USD</td>
</tr>
<tr class="text-sm bg-gray">
<td align="right"><b>Sub Total</b></td>
<td align="center" valign="top"><b>$3.50 USD</b></td>
</tr>
<tr class="text-sm bg-gray">
<td align="right"><b>Credit</b></td>
<td align="center" valign="top"><b>$0.00 USD</b></td>
</tr>
<tr class="text-sm bg-gray">
<td align="right"><b>Total</b></td>
<td align="center" valign="top"><b>$3.50 USD</b></td>
</tr>
</tbody>
</table>
<h4 style="margin-bottom: 1rem">Transactions</h4>
<table border="1">
<thead>
<tr class="bg-gray">
<th>Transaction Date</th>
<th>Gateway</th>
<th>Transaction ID</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr class="text-sm" align="center">
<td>10/10/2025</td>
<td>PayPal</td>
<td>P1234567890123456789</td>
<td>$3.50 USD</td>
</tr>
<tr class="text-sm bg-gray">
<td align="right" colspan="3"><b>Balance</b></td>
<td align="center"><b>$0.00 USD</b></td>
</tr>
</tbody>
</table>
<p class="text-sm" style="margin-top: 3rem;text-align: center;color: gray">
PDF Generated on
<script>document.writeln(new Date().toUTCString())</script>
</p>
</body>
</html>