Simple Template - TEMPLATES-SAMPLES
PDF from HTML Template sample in TEMPLATES-SAMPLES demonstrating ‘Simple Template’
html_template_default_simple.txt
<!-- this simple sample templates shows how to use macros in Mustache https://mustache.github.io/mustache.5.html and Handlebars https://handlebarsjs.com/guide/ templates. See other templates for advanced functions like auto calculation of tax, total, discount -->
<!doctype html>
<html lang="en-US">
<head>
<title>Invoice {{invoice_id}} {{client_name}}</title>
<script>
// helper to format numbers
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);
}
</script>
<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">$ {{numberFormat discount}}</span></div>
<div style="margin-bottom: 10px;">Tax: <span class="amount">$ {{numberFormat tax}}</span></div>
<div class="font-weight-bold footer-title alert-warning">TOTAL: <span class="total-amount amount font-weight-bold">$ {{numberFormat total}}</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>
html_template_default_simple_data.json
{
"paid": true,
"invoice_id": "0021",
"invoice_date": "August 29, 2041",
"invoice_dateDue": "September 29, 2041",
"issuer_name": "Sarah Connor",
"issuer_company": "T-800 Research Lab",
"issuer_address": "435 South La Fayette Park Place, Los Angeles, CA 90057",
"issuer_website": "www.example.com",
"issuer_email": "info@example.com",
"client_name": "Cyberdyne Systems",
"client_company": "Cyberdyne Systems",
"client_address": "18144 El Camino Real, Sunnyvale, California",
"client_email": "sales@example.com",
"items": [
{
"name": "T-800 Prototype Research",
"price": 1000.00
},
{
"name": "T-800 Cloud Sync Setup",
"price": 300.00
}
],
"discount": 100,
"tax": 87,
"total": 1287,
"note": "Thank you for your support of advanced robotics."
}
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.