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 कर कार्य किया जा सके ।
Bootstrap का उपयोग करने से हमए CSS लगाने की आवश्यकता ही नहीं हुई , फिर भी हमने जो input Group लिए थे उनकी एक जैसी Width करने के लिए हमने CSS का उपयोग किया हैं , आप चाहे हो इसे अलग से File न बना कर HTML File मे ही लिख सकते हैं ।
invoice.css
.input-group-text{width: 85px;}
CSS For Print Format
Print Format मे हमे Border Remove करना होती और और साथ मे background colour आदि भी बदलना होता हैं । उसके लिए हमने Specific CSS लिखी हैं । यह CSS फाइल केवल Print के समय ही Applicable होती हैं ।
इस 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 जोड़ने के लिए
इतना करने के बाद आप 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 ।
good good job