Complete Invoice with Calculation + Print (Bootstrap + JS + jQuery) its Free
Invoice with calculation and format, how to make invoice, invoice js, invoice css, Complete Invoice Using HTML, Bootstrap, js , jQuery With Print Format, how to create invoice with calculation step by step.
इस आर्टिकल (Invoice with Calculation) मे हमने आपको Bootstrap का उपयोग कर Invoice बनाना बताया है । साथ मे इस Article मे Media Query का उपयोग कर Print format कैसे बनाया जाता हैं उसके बार मे भी बताया हैं । इसी के साथ Dynamic Row Adding Logic भी बताया है जिसमे की jQuery का उपयोग किया हैं । फिर JavaScript का उपयोग कर Invoice Calculation और Sum लगाने से Related Script के बारे मे बताया हैं । कुल मिलाकर इस Article से आप बहुत ही कम Coding मे एक Invoice बनाना सिख जाएंगे ।
Invoice Bootstrap Layout
HTML Code का उपयोग कर Bootstrap Framework की सहायता से कुछ इस तरह से Invoice format बनाया गया हैं , इसमे Input Group, Table, Card आदि Bootstrap Class का उपयोग किया हैं ।
उपरोक्त Format मे detail मे Invoice के calculation लिखे गए हैं । इसी लिए इसे Invoice with calculation कहा गया हैं
Invoice Bootstrap Print Format
ऊपरोक्त Invoice Format मे केवल Border को हटाकर और Background आदि Colour को हटाकर एक Media Print बनाई हैं जिससे की आप Print Format बना सकते हैं ।
Content
उपरोक्त दोनों ही Format बनाने मे वैसे को एक ही File मे Script लिख कर आप बना सकते हैं, लेकिन आपको अच्छे से समझ मे आए इसलिए यहा पर html, css और js की अलग – अलग File बना दी हैं
- HTML (invoice.html)
- CSS (invoice.css)
- CSS For Print Format (invoiceprint.css)
- JS (invoice.js)
HTML
HTML मे Bootstrap CDN का उपयोग किया हैं साथ मे jQuery CDN का भी उपयोग किया है जिससे की कम Coding मे Dynamic Add और Remove कर कार्य किया जा सके ।
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Imagination Invoice Example</title>
<!-- For Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- CSS For Print Format -->
<link rel="stylesheet" media="print" href="invoiceprint.css">
<!-- CSS For Invoice -->
<link rel="stylesheet" href="invoice.css">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.2.slim.js" integrity="sha256-OflJKW8Z8amEUuCaflBZJ4GOg4+JnNh9JdVfoV+6biw=" crossorigin="anonymous"></script>
<!-- For Invoice -->
<script src="invoice.js"></script>
</head>
<body>
<div class="container ">
<div class="card">
<div class="card-header text-center">
<h4>INVOICE</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-8">
<div class="input-group mb-3">
<span class="input-group-text" >Customer</span>
<input type="text" class="form-control" placeholder="Customer" >
</div>
<div class="input-group mb-3">
<span class="input-group-text" >Address</span>
<input type="text" class="form-control" placeholder="Address" >
</div>
<div class="input-group mb-3">
<span class="input-group-text" >City</span>
<input type="text" class="form-control" placeholder="City" >
</div>
</div>
<div class="col-4">
<div class="input-group mb-3">
<span class="input-group-text" >Inv. No</span>
<input type="text" class="form-control" placeholder="Inv. No" >
</div>
<div class="input-group mb-3">
<span class="input-group-text" >Inv. Date</span>
<input type="date" class="form-control" placeholder="Inv. Date" >
</div>
</div>
</div>
<table class="table table-bordered">
<thead class="table-success">
<tr>
<th scope="col">#</th>
<th scope="col">Particular</th>
<th scope="col" class="text-end">Qty</th>
<th scope="col" class="text-end">Rate</th>
<th scope="col" class="text-end">Amount</th>
<th scope="col" class="NoPrint">
<button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">+</button>
</th>
</tr>
</thead>
<tbody id="TBody">
<tr id="TRow" class="d-none">
<th scope="row">1</th>
<td><input type="text" class="form-control" ></td>
<td><input type="number" class="form-control text-end" name="qty" onchange="Calc(this);"></td>
<td><input type="number" class="form-control text-end" name="rate" onchange="Calc(this);"></td>
<td><input type="number" class="form-control text-end" name="amt" value="0" disabled=""></td>
<td class="NoPrint"><button type="button" class="btn btn-sm btn-danger" onclick="BtnDel(this)">X</button></td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-8">
<button type="button" class="btn btn-primary" onclick="GetPrint()">Print</button>
</div>
<div class="col-4">
<div class="input-group mb-3">
<span class="input-group-text" >Total</span>
<input type="number" class="form-control text-end" id="FTotal" name="FTotal" disabled="">
</div>
<div class="input-group mb-3">
<span class="input-group-text" >GST</span>
<input type="number" class="form-control text-end" id="FGST" name="FGST" onchange="GetTotal()">
</div>
<div class="input-group mb-3">
<span class="input-group-text" >Net Amt</span>
<input type="number" class="form-control text-end" id="FNet" name="FNet" disabled="">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap Bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>Related Video : HTML & Bootstrap Invoice Format
CSS
Bootstrap का उपयोग करने से हमए CSS लगाने की आवश्यकता ही नहीं हुई , फिर भी हमने जो input Group लिए थे उनकी एक जैसी Width करने के लिए हमने CSS का उपयोग किया हैं , आप चाहे हो इसे अलग से File न बना कर HTML File मे ही लिख सकते हैं ।
.input-group-text {
width: 85px;
} CSS For Print Format
Print Format मे हमे Border Remove करना होती और और साथ मे background colour आदि भी बदलना होता हैं । उसके लिए हमने Specific CSS लिखी हैं । यह CSS फाइल केवल Print के समय ही Applicable होती हैं ।
.btn , .NoPrint
{
display: none;
}
.form-control
{
border: 0px;
}
.input-group-text
{
border: 0px;
background-color: white;
}
table
{
border : 1px solid black;
}JS (Invoice with Calculation)
इस JS फाइल मे जितनी भी हमने Logic लगाए हैं सभी के अलग अलग function बनाए है और उनके HTML से call किए हैं और एक Function से दूसरे Function को भी Call किया गया हैं । इसमे निम्न function हैं
- Invoice को Print करने के लिए
- Invoice मे rows Add / Insert करने के लिए
- पहले से Add की हुई Rows को Delete करने के लिए
- Detail Rows के Calculation करने के लिए जैसे Amt = Qty * Rate
- Amount का total Calculation करने और उसे Footer पर Set करने के लिए
- और साथ मे footer मे अलग से GST या अन्य कोई भी TAX जोड़ने के लिए
Related Video : Dynamic Add & Delete Button Using jQuery in Invoice
Related Video : How to Calculate Invoice Amount (Qty * Rate) & Total using JS
function GetPrint()
{
/*For Print*/
window.print();
}
function BtnAdd()
{
/*Add Button*/
var v = $("#TRow").clone().appendTo("#TBody") ;
$(v).find("input").val('');
$(v).removeClass("d-none");
$(v).find("th").first().html($('#TBody tr').length - 1);
}
function BtnDel(v)
{
/*Delete Button*/
$(v).parent().parent().remove();
GetTotal();
$("#TBody").find("tr").each(
function(index)
{
$(this).find("th").first().html(index);
}
);
}
function Calc(v)
{
/*Detail Calculation Each Row*/
var index = $(v).parent().parent().index();
var qty = document.getElementsByName("qty")[index].value;
var rate = document.getElementsByName("rate")[index].value;
var amt = qty * rate;
document.getElementsByName("amt")[index].value = amt;
GetTotal();
}
function GetTotal()
{
/*Footer Calculation*/
var sum=0;
var amts = document.getElementsByName("amt");
for (let index = 0; index < amts.length; index++)
{
var amt = amts[index].value;
sum = +(sum) + +(amt) ;
}
document.getElementById("FTotal").value = sum;
var gst = document.getElementById("FGST").value;
var net = +(sum) + +(gst);
document.getElementById("FNet").value = net;
}
MySQL मे Library Management System बनाना सीखे
इतना करने के बाद आप invoice html का browser पर Preview देखे , ऐड Button का उपयोग कर Row जोड़े और साथ मे यदि कुछ गलती हो जाए तो Delete Button का उपयोग कर उसे Remove कर देवे। जितनी भी Filed हैं उसके Value Fill करे और अंत मे Print का उपयोग कर Invoice का Format Print निकाले ।
आशा हैं मुझे की आपको यह Bootstrap Invoice with Calculation बहुत ही अच्छे से समझ मे आ गया होगा । फिर भी यदि आपको कोई भी Doubt हो तो आप मुझे निसंकोच Comment कर सकते हैं ।
यह Article Invoice with Calculation कैसा लगा बताना न भूले मिलते हैं Next Article मे Thanks for Reading ।
हमारे अन्य आर्टिकल
- MySQL Function
- MySQL Stored Procedure
- PHP Get /Post Method के बारे में जाने
- PHP Math Function के बारे में जाने
- C से C ++ सीखे सरल शब्दों में
- PHP Variable के बारे में जाने
- Arduino Control Structure
- Union in C
- Declaration of Pointer in C
- jQuery Search Filter
- MySQL Create Table | Alter Table | Drop Table
- API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)
- CPANEL In Hindi
good good job