jQuery Bootstrap 4 Invoice Billing PDF Document Generator in Browser Using jsPDF Library in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

 

 

index.html

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Invoice-Generator</title>
    <link rel="icon" href="assets/image/dollar.png">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
    <script defer src="assets/JS/main.js"></script>
    <script defer src="assets/JS/PDF.js"></script>
    <script defer src="assets/JS/addLineItem.js"></script>
    <script defer src="assets/JS/remLineItem.js"></script>
    <script defer src="assets/JS/updateBalance.js"></script>
    <script defer src="assets/JS/currencyPicker.js"></script>
</head>
<body>
    <div class="container main">
        <!--Start heading of invoice-->
        <h2 class="text-center" id="invoice" contenteditable="true">INVOICE</h2>
        <form>
            <div class="form-group">
                <label for="currencyPicker">Currency:</label>
                <select name="currency" class="form-control" id="currencyPicker"></select>
            </div>
        </form>
        <div class="row">
            <div class="col-sm-5">
                    <form>
                        <!--Add Logo-->
                        <div class="form-group jumbotron text-center" id="log">
                            <label for="logo" style="cursor: pointer;" id="hide">
                                <span class="fa fa-plus"></span> Add Your Logo
                            </label>
                            <input type="file" class="form-control-file" id="logo">
                        </div>
                        <!--Invoice from-->
                        <div class="form-group">
                            <input type="text" name="from" class="form-control" id="from" placeholder="Who is this invoice from?">
                        </div>
                        <!--Invoice to-->
                        <div class="form-group">
                            <input type="text"id="toShow" value="Bill To:"> 
                            <input type="text" name="to" class="form-control" id="to" placeholder="Who is this invoice to?">
                        </div>
                    </form>
            </div>
            <div class="col-sm-5 offset-sm-2">
                <form>
                    <div class="form-group">
                        <input type="text" id="file" value="File Name" readonly>
                        <input type="text" id="fileName" value="invoice">
                    </div>
                    <!--Date of Invoice-->
                    <div class="form-group">
                        <input type="text" value="Date" id="dateShow">
                        <input type="date" name="date" id="date">
                    </div>
                    <!--Due date-->
                    <div class="form-group">
                        <input type="text" value="Due Date" id="dueShow">
                        <input type="date" name="dueDate" id="due">
                    </div>
                    <!--Balance Due-->
                    <div class="form-group jumbotron">
                        <input type="text" value="Balance Due" id="balanceShow">
                        <span id="balanceDue"></span>
                    </div>
                </form>
            </div>
            </div>
            <!--Item List-->
            <div id="add">
                <div class="row">
                    <div class="col-sm-5 text-center">
                        <h5 contenteditable="true" id="i">Item</h5>
                    </div>
                    <div class="col-sm-2 text-center">
                        <h5 contenteditable="true" id="q">Quantity</h5>
                    </div>
                    <div class="col-sm-2 text-center">
                        <h5 contenteditable="true" id="r">Rate</h5>
                    </div>
                    <div class="col-sm-2 text-center">
                        <h5 contenteditable="true" id="a">Amount</h5>
                    </div>
                    <div class="col-sm-1"></div>
                </div>
            </div>
            <!--Add line item button-->
            <button class="btn btn-primary lineItem"><span class="fa fa-plus"></span> Line Item</button>
            <form id="final">
                <!--Subtotal-->
                <div class="form-group">
                    <input type="text" value="Subtotal" id="subtotal">
                    <span id="subtotalPrice"></span>
                </div>
                <!--Discount Percentage-->
                <div class="form-group">
                    <input type="text" value="Discount %" id="discount">
                    <input type="text" id="discountPercent" value="0">
                </div>
                <!--Tax Percentage-->
                <div class="form-group">
                    <input type="text" value="Tax %" id="tax">
                    <input type="text" id="taxPercent" value="0">
                </div>
                <!--Shipping Charges-->
                <div class="form-group">
                    <input type="text" value="Shipping" id="shipping">
                    <input type="text" id="shippingCharges" value="0">
                </div>
                <!--Total Amount-->
                <div class="form-group">
                    <input type="text" value="Total" id="total">
                    <span id="totalAmount"></span>
                </div>
                <!--Amount Paid-->
                <div class="form-group">
                    <input type="text" value="Amount Paid" id="amountp">
                    <input type="text" id="amountPaid" value="0">
                </div>
            </form>
            <form>
                <!--Notes-->
                <div class="form-group">
                    <input type="text" class="form-control" value="Notes" id="notes">
                    <input type="text" class="form-control" id="someNotes" placeholder="any relevant information">
                </div>
                <!--Terms-->
                <div class="form-group">
                    <input type="text" class="form-control" value="Terms" id="terms">
                    <input type="text" class="form-control" id="someTerms" placeholder="Terms and Conditions">
                </div>
            </form>
    </div>
    <div class="container text-center download">
        <button class="btn btn-success" id="download"><span class="fa fa-download"></span> Download Invoice</button>
    </div>
</body>
</html>

 

See also  Build a Gatsby Github Profile Readme Generator in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

currency.json

 

 

[
    {"cc":"AED","symbol":"\u062f.\u0625;","name":"UAE dirham"},
    {"cc":"AFN","symbol":"Afs","name":"Afghan afghani"},
    {"cc":"ALL","symbol":"L","name":"Albanian lek"},
    {"cc":"AMD","symbol":"AMD","name":"Armenian dram"},
    {"cc":"ANG","symbol":"NA\u0192","name":"Netherlands Antillean gulden"},
    {"cc":"AOA","symbol":"Kz","name":"Angolan kwanza"},
    {"cc":"ARS","symbol":"$","name":"Argentine peso"},
    {"cc":"AUD","symbol":"$","name":"Australian dollar"},
    {"cc":"AWG","symbol":"\u0192","name":"Aruban florin"},
    {"cc":"AZN","symbol":"AZN","name":"Azerbaijani manat"},
    {"cc":"BAM","symbol":"KM","name":"Bosnia and Herzegovina konvertibilna marka"},
    {"cc":"BBD","symbol":"Bds$","name":"Barbadian dollar"},
    {"cc":"BDT","symbol":"\u09f3","name":"Bangladeshi taka"},
    {"cc":"BGN","symbol":"BGN","name":"Bulgarian lev"},
    {"cc":"BHD","symbol":".\u062f.\u0628","name":"Bahraini dinar"},
    {"cc":"BIF","symbol":"FBu","name":"Burundi franc"},
    {"cc":"BMD","symbol":"BD$","name":"Bermudian dollar"},
    {"cc":"BND","symbol":"B$","name":"Brunei dollar"},
    {"cc":"BOB","symbol":"Bs.","name":"Bolivian boliviano"},
    {"cc":"BRL","symbol":"R$","name":"Brazilian real"},
    {"cc":"BSD","symbol":"B$","name":"Bahamian dollar"},
    {"cc":"BTN","symbol":"Nu.","name":"Bhutanese ngultrum"},
    {"cc":"BWP","symbol":"P","name":"Botswana pula"},
    {"cc":"BYR","symbol":"Br","name":"Belarusian ruble"},
    {"cc":"BZD","symbol":"BZ$","name":"Belize dollar"},
    {"cc":"CAD","symbol":"$","name":"Canadian dollar"},
    {"cc":"CDF","symbol":"F","name":"Congolese franc"},
    {"cc":"CHF","symbol":"Fr.","name":"Swiss franc"},
    {"cc":"CLP","symbol":"$","name":"Chilean peso"},
    {"cc":"CNY","symbol":"\u00a5","name":"Chinese/Yuan renminbi"},
    {"cc":"COP","symbol":"Col$","name":"Colombian peso"},
    {"cc":"CRC","symbol":"\u20a1","name":"Costa Rican colon"},
    {"cc":"CUC","symbol":"$","name":"Cuban peso"},
    {"cc":"CVE","symbol":"Esc","name":"Cape Verdean escudo"},
    {"cc":"CZK","symbol":"K\u010d","name":"Czech koruna"},
    {"cc":"DJF","symbol":"Fdj","name":"Djiboutian franc"},
    {"cc":"DKK","symbol":"Kr","name":"Danish krone"},
    {"cc":"DOP","symbol":"RD$","name":"Dominican peso"},
    {"cc":"DZD","symbol":"\u062f.\u062c","name":"Algerian dinar"},
    {"cc":"EEK","symbol":"KR","name":"Estonian kroon"},
    {"cc":"EGP","symbol":"\u00a3","name":"Egyptian pound"},
    {"cc":"ERN","symbol":"Nfa","name":"Eritrean nakfa"},
    {"cc":"ETB","symbol":"Br","name":"Ethiopian birr"},
    {"cc":"EUR","symbol":"\u20ac","name":"European Euro"},
    {"cc":"FJD","symbol":"FJ$","name":"Fijian dollar"},
    {"cc":"FKP","symbol":"\u00a3","name":"Falkland Islands pound"},
    {"cc":"GBP","symbol":"\u00a3","name":"British pound"},
    {"cc":"GEL","symbol":"GEL","name":"Georgian lari"},
    {"cc":"GHS","symbol":"GH\u20b5","name":"Ghanaian cedi"},
    {"cc":"GIP","symbol":"\u00a3","name":"Gibraltar pound"},
    {"cc":"GMD","symbol":"D","name":"Gambian dalasi"},
    {"cc":"GNF","symbol":"FG","name":"Guinean franc"},
    {"cc":"GQE","symbol":"CFA","name":"Central African CFA franc"},
    {"cc":"GTQ","symbol":"Q","name":"Guatemalan quetzal"},
    {"cc":"GYD","symbol":"GY$","name":"Guyanese dollar"},
    {"cc":"HKD","symbol":"HK$","name":"Hong Kong dollar"},
    {"cc":"HNL","symbol":"L","name":"Honduran lempira"},
    {"cc":"HRK","symbol":"kn","name":"Croatian kuna"},
    {"cc":"HTG","symbol":"G","name":"Haitian gourde"},
    {"cc":"HUF","symbol":"Ft","name":"Hungarian forint"},
    {"cc":"IDR","symbol":"Rp","name":"Indonesian rupiah"},
    {"cc":"ILS","symbol":"\u20aa","name":"Israeli new sheqel"},
    {"cc":"INR","symbol":"\u20B9","name":"Indian rupee"},
    {"cc":"IQD","symbol":"\u062f.\u0639","name":"Iraqi dinar"},
    {"cc":"IRR","symbol":"IRR","name":"Iranian rial"},
    {"cc":"ISK","symbol":"kr","name":"Icelandic kr\u00f3na"},
    {"cc":"JMD","symbol":"J$","name":"Jamaican dollar"},
    {"cc":"JOD","symbol":"JOD","name":"Jordanian dinar"},
    {"cc":"JPY","symbol":"\u00a5","name":"Japanese yen"},
    {"cc":"KES","symbol":"KSh","name":"Kenyan shilling"},
    {"cc":"KGS","symbol":"\u0441\u043e\u043c","name":"Kyrgyzstani som"},
    {"cc":"KHR","symbol":"\u17db","name":"Cambodian riel"},
    {"cc":"KMF","symbol":"KMF","name":"Comorian franc"},
    {"cc":"KPW","symbol":"W","name":"North Korean won"},
    {"cc":"KRW","symbol":"W","name":"South Korean won"},
    {"cc":"KWD","symbol":"KWD","name":"Kuwaiti dinar"},
    {"cc":"KYD","symbol":"KY$","name":"Cayman Islands dollar"},
    {"cc":"KZT","symbol":"T","name":"Kazakhstani tenge"},
    {"cc":"LAK","symbol":"KN","name":"Lao kip"},
    {"cc":"LBP","symbol":"\u00a3","name":"Lebanese lira"},
    {"cc":"LKR","symbol":"Rs","name":"Sri Lankan rupee"},
    {"cc":"LRD","symbol":"L$","name":"Liberian dollar"},
    {"cc":"LSL","symbol":"M","name":"Lesotho loti"},
    {"cc":"LTL","symbol":"Lt","name":"Lithuanian litas"},
    {"cc":"LVL","symbol":"Ls","name":"Latvian lats"},
    {"cc":"LYD","symbol":"LD","name":"Libyan dinar"},
    {"cc":"MAD","symbol":"MAD","name":"Moroccan dirham"},
    {"cc":"MDL","symbol":"MDL","name":"Moldovan leu"},
    {"cc":"MGA","symbol":"FMG","name":"Malagasy ariary"},
    {"cc":"MKD","symbol":"MKD","name":"Macedonian denar"},
    {"cc":"MMK","symbol":"K","name":"Myanma kyat"},
    {"cc":"MNT","symbol":"\u20ae","name":"Mongolian tugrik"},
    {"cc":"MOP","symbol":"P","name":"Macanese pataca"},
    {"cc":"MRO","symbol":"UM","name":"Mauritanian ouguiya"},
    {"cc":"MUR","symbol":"Rs","name":"Mauritian rupee"},
    {"cc":"MVR","symbol":"Rf","name":"Maldivian rufiyaa"},
    {"cc":"MWK","symbol":"MK","name":"Malawian kwacha"},
    {"cc":"MXN","symbol":"$","name":"Mexican peso"},
    {"cc":"MYR","symbol":"RM","name":"Malaysian ringgit"},
    {"cc":"MZM","symbol":"MTn","name":"Mozambican metical"},
    {"cc":"NAD","symbol":"N$","name":"Namibian dollar"},
    {"cc":"NGN","symbol":"\u20a6","name":"Nigerian naira"},
    {"cc":"NIO","symbol":"C$","name":"Nicaraguan c\u00f3rdoba"},
    {"cc":"NOK","symbol":"kr","name":"Norwegian krone"},
    {"cc":"NPR","symbol":"NRs","name":"Nepalese rupee"},
    {"cc":"NZD","symbol":"NZ$","name":"New Zealand dollar"},
    {"cc":"OMR","symbol":"OMR","name":"Omani rial"},
    {"cc":"PAB","symbol":"B./","name":"Panamanian balboa"},
    {"cc":"PEN","symbol":"S/.","name":"Peruvian nuevo sol"},
    {"cc":"PGK","symbol":"K","name":"Papua New Guinean kina"},
    {"cc":"PHP","symbol":"\u20b1","name":"Philippine peso"},
    {"cc":"PKR","symbol":"Rs.","name":"Pakistani rupee"},
    {"cc":"PLN","symbol":"z\u0142","name":"Polish zloty"},
    {"cc":"PYG","symbol":"\u20b2","name":"Paraguayan guarani"},
    {"cc":"QAR","symbol":"QR","name":"Qatari riyal"},
    {"cc":"RON","symbol":"L","name":"Romanian leu"},
    {"cc":"RSD","symbol":"din.","name":"Serbian dinar"},
    {"cc":"RUB","symbol":"R","name":"Russian ruble"},
    {"cc":"SAR","symbol":"SR","name":"Saudi riyal"},
    {"cc":"SBD","symbol":"SI$","name":"Solomon Islands dollar"},
    {"cc":"SCR","symbol":"SR","name":"Seychellois rupee"},
    {"cc":"SDG","symbol":"SDG","name":"Sudanese pound"},
    {"cc":"SEK","symbol":"kr","name":"Swedish krona"},
    {"cc":"SGD","symbol":"S$","name":"Singapore dollar"},
    {"cc":"SHP","symbol":"\u00a3","name":"Saint Helena pound"},
    {"cc":"SLL","symbol":"Le","name":"Sierra Leonean leone"},
    {"cc":"SOS","symbol":"Sh.","name":"Somali shilling"},
    {"cc":"SRD","symbol":"$","name":"Surinamese dollar"},
    {"cc":"SYP","symbol":"LS","name":"Syrian pound"},
    {"cc":"SZL","symbol":"E","name":"Swazi lilangeni"},
    {"cc":"THB","symbol":"\u0e3f","name":"Thai baht"},
    {"cc":"TJS","symbol":"TJS","name":"Tajikistani somoni"},
    {"cc":"TMT","symbol":"m","name":"Turkmen manat"},
    {"cc":"TND","symbol":"DT","name":"Tunisian dinar"},
    {"cc":"TRY","symbol":"TRY","name":"Turkish new lira"},
    {"cc":"TTD","symbol":"TT$","name":"Trinidad and Tobago dollar"},
    {"cc":"TWD","symbol":"NT$","name":"New Taiwan dollar"},
    {"cc":"TZS","symbol":"TZS","name":"Tanzanian shilling"},
    {"cc":"UAH","symbol":"UAH","name":"Ukrainian hryvnia"},
    {"cc":"UGX","symbol":"USh","name":"Ugandan shilling"},
    {"cc":"USD","symbol":"US$","name":"United States dollar"},
    {"cc":"UYU","symbol":"$U","name":"Uruguayan peso"},
    {"cc":"UZS","symbol":"UZS","name":"Uzbekistani som"},
    {"cc":"VEB","symbol":"Bs","name":"Venezuelan bolivar"},
    {"cc":"VND","symbol":"\u20ab","name":"Vietnamese dong"},
    {"cc":"VUV","symbol":"VT","name":"Vanuatu vatu"},
    {"cc":"WST","symbol":"WS$","name":"Samoan tala"},
    {"cc":"XAF","symbol":"CFA","name":"Central African CFA franc"},
    {"cc":"XCD","symbol":"EC$","name":"East Caribbean dollar"},
    {"cc":"XDR","symbol":"SDR","name":"Special Drawing Rights"},
    {"cc":"XOF","symbol":"CFA","name":"West African CFA franc"},
    {"cc":"XPF","symbol":"F","name":"CFP franc"},
    {"cc":"YER","symbol":"YER","name":"Yemeni rial"},
    {"cc":"ZAR","symbol":"R","name":"South African rand"},
    {"cc":"ZMK","symbol":"ZK","name":"Zambian kwacha"},
    {"cc":"ZWR","symbol":"Z$","name":"Zimbabwean dollar"}
  ]

 

See also  jsPDF Tutorial to Export Colorful Bar Chart to PDF Document Using Chart.js Library in Browser Using Javascript Full Project For Beginners

DOWNLOAD FULL SOURCE CODE

 

Leave a Reply