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 का उपयोग किया हैं ।

bootstrap invoice with calculation

उपरोक्त 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 कर कार्य किया जा सके ।

Related Video : HTML & Bootstrap Invoice Format

CSS

Bootstrap का उपयोग करने से हमए CSS लगाने की आवश्यकता ही नहीं हुई , फिर भी हमने जो input Group लिए थे उनकी एक जैसी Width करने के लिए हमने CSS का उपयोग किया हैं , आप चाहे हो इसे अलग से File न बना कर HTML File मे ही लिख सकते हैं ।

CSS For Print Format

Print Format मे हमे Border Remove करना होती और और साथ मे background colour आदि भी बदलना होता हैं । उसके लिए हमने Specific CSS लिखी हैं । यह CSS फाइल केवल Print के समय ही Applicable होती हैं ।

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

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 ।

हमारे अन्य आर्टिकल

6 Comments

Add a Comment

Your email address will not be published. Required fields are marked *