کامپوننت آپلود و نمایش PDF با HTML, CSS و JavaScript

معرفی سورس

یک کامپوننت زیبا، کاربردی و کاملاً کلاینت-ساید (Client-Side) برای آپلود و نمایش فایل‌های PDF در مرورگر که با HTML، CSS و JavaScript خالص پیاده‌سازی شده است. بدون نیاز به هیچ کتابخانه‌ی اضافی، فایل PDF انتخابی کاربر را دریافت کرده و در یک iframe نمایش می‌دهد. مناسب برای اسناد، کتاب‌های الکترونیکی، قراردادها و هر نوع محتوای PDF که باید در وب‌سایت نشان داده شود.

🎯 ویژگی‌ها

• ✅ بارگذاری و نمایش PDF به‌صورت کاملاً کلاینت-ساید (بدون ارسال به سرور)
• ✅ استفاده از URL.createObjectURL برای ایجاد آدرس موقت فایل
• ✅ طراحی مدرن با تم تیره، پس‌زمینه شیشه‌ای (Glass Effect) و کارت شناور
• ✅ نمایش نام فایل انتخابی با محدودیت طول و قطع خودکار
• ✅ اعتبارسنجی نوع فایل – فقط PDF قابل قبول است
• ✅ پیام‌های بازخورد (Toast) برای خطا و موفقیت
• ✅ مدیریت حافظه با URL.revokeObjectURL برای آزادسازی منابع
• ✅ طراحی واکنش‌گرا (Responsive) – مناسب برای موبایل، تبلت و دسکتاپ
• ✅ کدنویسی تمیز، دارای کامنت و آماده‌ی یادگیری

🎨 طراحی ظاهری

یک کارت شیشه‌ای با حاشیه‌های گرد و نرم که در مرکز صفحه قرار دارد. دکمه‌ی آپلود با گرادیانت نارنجی و افکت هاور، باکس نمایش نام فایل و یک iframe تمام‌صفحه که پس از انتخاب فایل ظاهر می‌شود. تا زمانی که فایلی انتخاب نشده، یک placeholder با آیکون و پیام راهنما نمایش داده می‌شود.

📦 محتویات سورس

• index.html – ساختار صفحه و المنت‌ها
• style.css – استایل‌دهی کامل با تم تیره و افکت شیشه‌ای
• script.js – منطق انتخاب فایل، اعتبارسنجی، نمایش PDF و Toast

🚀 نحوه استفاده

1. هر سه فایل را در یک پوشه قرار دهید.
2. فایل index.html را با مرورگر باز کنید.
3. روی دکمه "انتخاب فایل PDF" کلیک کرده و یک فایل PDF انتخاب کنید.
4. فایل PDF در صفحه نمایش داده می‌شود.

برای استفاده در پروژه‌ی خود، کافی است کدهای HTML، CSS و JS را به صفحات خود اضافه کنید.

📋 مشخصات فنی

• تکنولوژی: HTML5, CSS3, JavaScript (Vanilla)
• APIهای استفاده شده: FileReader API, URL.createObjectURL, URL.revokeObjectURL
• طراحی: واکنش‌گرا (Responsive)
• وابستگی: صفر (بدون کتابخانه خارجی)
• تعداد فایل: ۳
• حجم کلی: بسیار کم
• سازگاری: تمام مرورگرهای مدرن

🎁 این سورس برای چه کسانی مناسب است؟

• توسعه‌دهندگان وبی که نیاز به نمایش PDF در سایت خود دارند
• افراد مبتدی که می‌خواهند با File API و مدیریت فایل در JavaScript آشنا شوند
• پروژه‌های نمایش اسناد، کتاب‌ها، قراردادها و گزارش‌ها
• هرکسی که یک کامپوننت آماده، سبک و شکیل برای نمایش PDF می‌خواهد

💡 چرا این سورس؟

• 🔹 کاملاً کلاینت-ساید – بدون نیاز به سرور یا Backend
• 🔹 کد بسیار تمیز، دارای کامنت و قابل یادگیری
• 🔹 طراحی مدرن و قابل شخصی‌سازی (رنگ‌ها، ابعاد، فونت)
• 🔹 مدیریت صحیح حافظه و اعتبارسنجی ورودی
• 🔹 اجرای فوری و بدون هیچ پیش‌نیازی