Link Search Menu Expand Document


PDF from HTML Template sample in TEMPLATES-SAMPLES demonstrating ‘Simple Template’

<!-- this simple sample templates shows how to use macros in Mustache and Handlebars  templates. See other templates for advanced functions like auto calculation of tax, total, discount -->
<!doctype html>
<html lang="en-US">
<title>Invoice {{invoice_id}} {{client_name}}</title>    

// 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);


<link rel="stylesheet" href="" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    {{#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>
    <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 class="col col-md-6">
                        <div class="">
                            <div class="">
                                <span class="font-weight-bold">Invoice Number:</span> {{invoice_id}}
                            <div class="">
                                <span class="font-weight-bold">Invoice Date:</span> {{invoice_date}}
                            <div class="">
                                <span class="font-weight-bold">Invoice Due Date:</span> {{invoice_dateDue}}
<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 class="row col-md-12">
                    <div class="col col-md-12">
                    <table class="table table-striped" cellspacing="0">
                            <tr class="table-head">
                                <th class="text-left">Item</th>
                                <th class="text-right">Price</th>
                            {{#each items}}
                                <td class="text-left">{{name}}</td>
                                <td class="text-right">$ {{numberFormat price}}</td>

                <div class="row col-md-12">
                  <div class="col col-md-6">
                    <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 class="container text-muted">{{note}}</div>

<img src="[[barcode: QRCode Invoice {{invoice_id}} {{client_name}} ]]" />                        

  "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": "",
  "issuer_email": "",
  "client_name": "Cyberdyne Systems",
  "client_company": "Cyberdyne Systems",
  "client_address": "18144 El Camino Real, Sunnyvale, California",
  "client_email": "",
  "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."
} 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 API key here!

Download Source Code (.zip)

return to the previous page explore PDF from HTML Template endpoint