لینک کوتاه : https://magicfile.ir/?p=4750
💼 دانلود سورس کد تولیدکننده فاکتور مدرن با 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 (نسخه فارسی)
یک نمونه عملی و حرفه‌ای از کاربرد جاوااسکریپت در ایجاد نرم‌افزارهای مالی تحت وب است.
این ابزار به‌خوبی می‌تواند پایه‌ای برای ساخت سیستم‌های بزرگ‌تر مانند مدیریت فروش، صدور فاکتور آنلاین یا حسابداری ساده باشد.
