Invoice With Auto Calculations and QR Code - TEMPLATES-SAMPLES
PDF from HTML Template sample in TEMPLATES-SAMPLES demonstrating ‘Invoice With Auto Calculations and QR Code’
data.json
{
"invoice_id": "1234567",
"invoice_date": "April 30, 2016",
"invoice_dateDue": "May 15, 2016",
"paid": false,
"issuer_name": "Acme Inc",
"issuer_company": "Acme International",
"issuer_address": "City, Street 3rd",
"issuer_email": "support@example.com",
"issuer_website": "http://example.com",
"client_name": "Food Delivery Inc.",
"client_company": "Food Delivery International",
"client_address": "New York, Some Street, 42",
"client_email": "client@example.com",
"items": [
{
"name": "Setting up new web-site",
"price": 250
},
{
"name": "Website Content Addition",
"price": 700
},
{
"name": "Database Setup",
"price": 200
},
{
"name": "Record Digitalization",
"price": 1800
},
{
"name": "Cloud Storage",
"price": 500
},
{
"name": "Short Messages",
"price": 35
},
{
"name": "Search Engine Optimization",
"price": 200
},
{
"name": "Priority Support",
"price": 75
},
{
"name": "Configuring mail server and mailboxes",
"price": 50
}
],
"tax": 0.065,
"discount": 0.01,
"note": "Thank You For Your Business!"
}
template.html
<!-- this sample shows how to use {{macro}} styles variables but also how to define simple functions and conditional logic -->
<!-- Handlebars it the powerful template language based on {{Mustache}} but with conditions, js functions and much more. See https://handlebarsjs.com/ for information and samples -->
<!doctype html>
<html lang="en-US">
<head>
<script>
// you can use Handlebars helpers like #if, #unless, #each (see https://handlebarsjs.com/guide/builtin-helpers.html)
// but you can also define your own helper functions like the one below which takes all items and calculates total price
// see Handlebars custom helpers section: https://handlebarsjs.com/guide/#custom-helpers
// also see Handlebars playground online: https://handlebarsjs.com/examples/helper-safestring.html
// calculating total after discount with added tax
Handlebars.registerHelper("calcTotal", calcTotal);
function calcTotal(data) {
// first calculate total
var total = 0;
for (var i in data.items) {
total += data.items[i].price;
}
return new Handlebars.SafeString(
numberFormat(
roundAdvanced(
(total - total * data.discount) * // applying discount
(1.00 + data.tax) // adding tax
)
)
);
}
// calculating tax alone
Handlebars.registerHelper("calcTax", calcTax);
function calcTax(data) {
// first calculat total
var total = 0;
for (var i in data.items) {
total += data.items[i].price;
}
return new Handlebars.SafeString(
numberFormat(
roundAdvanced(
total * (1.00 - data.discount) * // total with discount applied
data.tax
)
)
); // calculating tax alone
}
// calculating discount alone (discount is always before tax)
Handlebars.registerHelper("calcDiscount", calcDiscount);
function calcDiscount(data) {
// first calculate total
var total = 0;
for (var i in data.items) {
total += data.items[i].price;
}
return new Handlebars.SafeString(
numberFormat(
roundAdvanced(
total * data.discount
)
)
);
}
Handlebars.registerHelper('numberFormat', numberFormat);
function numberFormat(value) {
// Helper parameters
var dl = 2;
var ts = ',';
var ds = '.';
// Parse to float
var value = parseFloat(value);
// The regex
var re = '\\d(?=(\\d{3})+' + (dl > 0 ? '\\D' : '$') + ')';
// Formats the number with the decimals
var num = value.toFixed(Math.max(0, ~~dl));
// Returns the formatted number
return (ds ? num.replace('.', ds) : num).replace(new RegExp(re, 'g'), '$&' + ts);
}
function roundAdvanced(val) {
// round to 2 decimal places https://stackoverflow.com/a/11832950
return Math.round(val * 100 + Number.EPSILON) / 100;
}
// multiple number and return
Handlebars.registerHelper('multiply', function (value1, value2) {
return roundAdvanced(value1 * value2);
});
</script>
<title>Invoice {{invoice_id}} {{client_name}}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body>
{{#if paid}}
<div
style="border-width: 3px;border-style: solid; border-color: #008000;border-radius: 8px; color: #008000; opacity:0.4; position: absolute; z-index: 1; left:80%; top:3%; font-size: 60pt;transform: rotate(-20deg)">
PAID </div>
{{/if}}
<div class="container">
<div class="">
<div class="">
<!-- invoice: header begin-->
<div class="row col-md-12">
<div class="col col-md-6">
<div class="font-weight-bold">{{issuer_name}}</div>
<div class="">{{issuer_company}}</div>
<div class="">{{issuer_address}}</div>
<div class="">{{issuer_email}}</div>
<div class="">{{issuer_website}}</div>
</div>
<div class="col col-md-6">
<div class="">
<div class="">
<span class="font-weight-bold">Invoice Number:</span> {{invoice_id}}
</div>
<div class="">
<span class="font-weight-bold">Invoice Date:</span> {{invoice_date}}
</div>
<div class="">
<span class="font-weight-bold">Invoice Due Date:</span> {{invoice_dateDue}}
</div>
</div>
</div>
</div>
<div class="row col-md-12">
<div class="col col-md-6"></div>
<div class="col col-md-6">
<div class="font-weight-bold footer-title">BILL TO</div>
<div class="">
<div class=""><strong>Name:</strong> {{client_name}}</div>
<div class=""><strong>Company:</strong> {{client_company}}</div>
<div class=""><strong>Address:</strong> {{client_address}}</div>
<div class=""><strong>Email:</strong> {{client_email}}</div>
</div>
</div>
</div>
<div class="row col-md-12">
<div class="col col-md-12">
<table class="table table-striped" cellspacing="0">
<thead>
<tr class="table-head">
<th class="text-left">Item</th>
<th class="text-right">Price</th>
</tr>
</thead>
<tbody>
{{#each items}}
<tr>
<td class="text-left">{{name}}</td>
<td class="text-right">${{numberFormat price}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
<div class="row col-md-12">
<div class="col col-md-6">
</div>
<div class="col col-md-6 text-right">
<div style="margin-bottom: 10px;">Discount: <span class="amount">${{calcDiscount @root}}</span>
</div>
<div style="margin-bottom: 10px;">Tax: <span class="amount">${{calcTax @root}} ({{multiply
@root.tax 100}}%)</span></div>
<div class="font-weight-bold footer-title alert-warning">TOTAL: <span
class="total-amount amount font-weight-bold">${{calcTotal @root}}</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="container text-muted">{{note}}</div>
<center>
<img src="[[barcode: QRCode Invoice {{invoice_id}} {{client_name}} ]]" />
</center>
</div>
</body>
</html>
PDF.co Web API: the Web API with a set of tools for documents manipulation, data conversion, data extraction, splitting and merging of documents. Includes image recognition, built-in OCR, barcode generation and barcode decoders to decode bar codes from scans, pictures and pdf.