توضیحات کوتاه و لینک دانلود
توضیحات کامل در مورد فایل
💼 دانلود سورس کد تولیدکننده فاکتور مدرن با HTML، CSS و JavaScript
در این پروژه فوقالعاده، یک سیستم حرفهای برای تولید فاکتور آنلاین طراحی شده است. این برنامه با استفاده از HTML، CSS و JavaScript خالص ساخته شده و به کاربران اجازه میدهد فاکتورهای زیبا و استاندارد را در مرورگر خود ایجاد، مشاهده، چاپ و بهصورت PDF ذخیره کنند — بدون نیاز به هیچ سرور یا نرمافزار اضافی.
🌟 ویژگیهای برجسته پروژه
✅ کاملاً فارسی و راستچین
تمام متون، برچسبها، دکمهها و بخشها به زبان فارسی ترجمه شدهاند و با چیدمان RTL (Right-To-Left) سازگار هستند.
✅ تولید خودکار شماره فاکتور و تاریخ
سیستم بهصورت خودکار تاریخ روز را در فاکتور قرار میدهد و شماره فاکتور تصادفی تولید میکند (مثلاً INV-1234).
✅ افزودن و حذف آیتمها بهصورت داینامیک
کاربر میتواند هر تعداد آیتم (شرح کالا یا خدمات) به فاکتور اضافه یا حذف کند، و جمع مبلغها بهصورت خودکار بهروزرسانی میشود.
✅ محاسبه خودکار جمع، مالیات و تخفیف
با هر تغییر در مقدار، قیمت، تخفیف یا نرخ مالیات، مبلغ کل فوراً محاسبه میشود.
✅ پیشنمایش زنده فاکتور
در همان لحظه که دادهها وارد میشوند، پیشنمایش حرفهای و آماده چاپ فاکتور در سمت راست صفحه نمایش داده میشود.
✅ چاپ و ذخیره به PDF
با استفاده از کتابخانههای html2canvas و jsPDF میتوانید از فاکتور خروجی PDF بگیرید یا آن را چاپ کنید.
✅ حالت تاریک و روشن (Dark / Light Mode)
کاربران میتوانند بین دو تم روشن و تاریک جابهجا شوند؛ حالت انتخابشده در حافظه مرورگر ذخیره میشود.
✅ ریسپانسیو و قابل اجرا در موبایل
طراحی پروژه بهگونهای است که در همه دستگاهها (دسکتاپ، لپتاپ، تبلت و موبایل) بدون نیاز به تنظیمات خاصی قابل استفاده است.
🧱 ساختار کلی پروژه
پروژه از یک فایل HTML تشکیل شده است که شامل ساختار رابط کاربری، استایلها و کدهای جاوااسکریپت درون صفحه است:
index.html ← شامل ساختار کامل فرم فاکتور، استایلها و منطق جاوااسکریپت style.css ← (اختیاری) فایل استایل جداگانه برای طراحی ظاهری (در لینک CDN فراخوانی میشود)
همچنین از دو کتابخانهی خارجی برای تولید PDF و عکس از صفحه استفاده شده است:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
🖥️ نحوه اجرا
-
کل کد را در یک فایل با نام
index.htmlذخیره کنید. -
آن را با مرورگر (Chrome یا Edge) باز کنید.
-
فرم فاکتور را با اطلاعات شرکت، مشتری، و موارد موردنظر پر کنید.
-
روی دکمههای:
-
📄 ذخیره به PDF
-
🖨 چاپ فاکتور
-
🗑 پاکسازی همه موارد
کلیک کنید تا عملیات مربوطه انجام شود.
-
🧩 امکانات فنی و جاوااسکریپتهای کلیدی
-
تابع
initApp(): راهاندازی اولیه برنامه، تنظیم تاریخها و رویدادها. -
تابع
addItemRow(): ایجاد خودکار ردیف جدید در جدول آیتمها. -
تابع
calculateTotals(): محاسبه جمع مبلغها، مالیات و تخفیف. -
تابع
generatePdf(): گرفتن خروجی PDF با کتابخانهjsPDF. -
تابع
updateInvoicePreview(): بروزرسانی پیشنمایش زنده فاکتور. -
تابع
clearAll(): پاکسازی تمام اطلاعات و بازگرداندن به حالت اولیه.
🧮 نمونه عملکرد
مثلاً اگر کاربر این دادهها را وارد کند:
| شرح | تعداد | قیمت واحد | مالیات | مبلغ |
|---|---|---|---|---|
| خدمات طراحی وب | 2 | 2,500,000 | 10% | 5,500,000 |
| پشتیبانی ماهانه | 1 | 1,000,000 | 0% | 1,000,000 |
در خروجی، جمع کل (با مالیات و تخفیف لحاظشده) بهصورت خودکار محاسبه میشود و در بخش پایین فاکتور نمایش داده خواهد شد.
🎨 طراحی و رابط کاربری
فاکتور با استایل مدرن و مینیمال طراحی شده است.
قالب بخشبندی شده شامل قسمتهای زیر است:
-
جزئیات فاکتور (شماره، تاریخ، سررسید)
-
اطلاعات شرکت شما
-
اطلاعات مشتری
-
جدول آیتمها با قابلیت افزودن و حذف
-
خلاصه مالی شامل مالیات، تخفیف و مبلغ کل
-
پیشنمایش چاپی فاکتور
📦 مزایا برای توسعهدهندگان
-
کدها تمیز، خوانا و ماژولار نوشته شدهاند.
-
میتوان آن را بهراحتی با سیستمهای بکاند (PHP، Node.js، Python) ادغام کرد.
-
امکان افزودن لوگو، QRCode، امضا یا مهر دیجیتال وجود دارد.
-
مناسب برای پروژههای آموزشی، نمونهکار طراحی وب، یا سیستمهای فروش آنلاین است.
📄 پیشنمایش بخش کد HTML
<h1>مولد فاکتور</h1> <div class="controls"> <button id="generatePdf" class="btn"><i class="fas fa-file-pdf"></i>به عنوان PDF ذخیره کنید</button> <button id="printInvoice" class="btn"><i class="fas fa-print"></i>فاکتور چاپی</button> </div>
این بخش دکمههای اصلی پروژه را ایجاد میکند که کاربر با آنها میتواند فاکتور را چاپ یا در قالب PDF ذخیره کند.
📚 نتیجهگیری
پروژهی تولید فاکتور مدرن با HTML، CSS و JavaScript (نسخه فارسی)
یک نمونه عملی و حرفهای از کاربرد جاوااسکریپت در ایجاد نرمافزارهای مالی تحت وب است.
این ابزار بهخوبی میتواند پایهای برای ساخت سیستمهای بزرگتر مانند مدیریت فروش، صدور فاکتور آنلاین یا حسابداری ساده باشد.
نظرات کاربران