ساخت دکمه دانلود با جاوااسکریپت
فرض کنید میخاهیم یک دکمه در صفحه html بزاریم که وقتی روش کلیک کردیم یک فایلی داخل کامپیوتر ما دانلود و ذخیره کند:
فرض کنید یک فایلی دارید به اسم test.txt که میخاهید کاربران وقتی روی دکمه کلیک کردند فایل دانلود و سپس بر روی کامپیوتر شخصی کاربران ذخیره شود.
مراحل به این صورت است:
ابتدا یک دکمه با id دلخواه درون صفحه میزاریم :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>وبسایت فرانت کد</title>
</head>
<body>
<button id="download">دانلود فایل</button>
</body>
</html>
حالا میریم سراغ جاوااسکریپت :
// انتخاب دکمه با استفاده از ID
const downloadBtn = document.getElementById('downloadBtn');
// اضافه کردن رویداد کلیک به دکمه
downloadBtn.addEventListener('click', function() {
// ساخت لینک به فایل خارجی
const a = document.createElement('a');
a.href = './myfile.txt'; // مسیر فایل که می‌خواهید دانلود شود
// تعیین نام فایل (در صورت نیاز، می‌توانید این ویژگی را حذف کنید)
a.download = 'downloaded_file.txt';
// شبیه‌سازی کلیک بر روی لینک
a.click();
});
خب حالا ی بررسی کنیم ببینیم توی این کد اصلا ما چیکار کردیم , خط به خط بررسی میکنیم :
- لینک به فایل: در اینجا، فایل از مسیر
./myfile.txtدانلود می‌شود. شما می‌توانید مسیر فایل را به هر فایل موجود روی سرور یا سیستم خود تغییر دهید. - ویژگی
download: با استفاده از ویژگیdownloadدر تگ<a>, شما می‌توانید نامی دلخواه برای فایل در زمان دانلود تعیین کنید. اگر این ویژگی حذف شود، فایل با نام اصلی‌اش دانلود خواهد شد. - شبیه‌سازی کلیک: با ایجاد یک تگ
<a>و شبیه‌سازی کلیک روی آن، دانلود به‌صورت خودکار شروع می‌شود.
این روش بسیار ساده است و نیازی به مدیریت محتوای فایل در جاوا اسکریپت ندارد، چراکه فایل از قبل آماده است و فقط مسیر فایل مشخص می‌شود.
خب دوستان این روش یکی از ساده ترین روش ها برای ساخت دکمه دانلود بود . اگر بخواهید فایلی غیر از تکست برای دانلود بزارید و مثلا از فایل pdf استفاده کنید هم به همین روش فقط مسیر رو باید عوض کنید
