Link Search Menu Expand Document

Invoice With Barccode - TEMPLATES-SAMPLES

PDF from HTML Template sample in TEMPLATES-SAMPLES demonstrating ‘Invoice With Barccode’

html_template_default.txt
<!-- 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>
html_template_default_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.0
      },
      {
        "name": "T-800 Cloud Sync Setup",
        "price": 300.0
      }
    ],
    "discount": 0.1,
    "tax": 0.0725,
    "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.

Get your PDF.co API key here!

Download Source Code (.zip)

return to the previous page explore PDF from HTML Template endpoint