HTML5 با تمام API های جدید، انواع ورودی و ویژگی های جدید برای فرم ها عرضه شد. همانطور که معمولاً اتفاق می‌افتد، آن افزوده‌های اصلی اغلب ارتقاهای جزئی را پنهان می‌کنند و من فکر می‌کنم که این به ویژه در مورد ویژگی دانلود صادق است.

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

با استفاده از ویژگی دانلود

از آنجایی که ویژگی دانلود از هیچ نوع اسکریپت استفاده نمی کند، به سادگی افزودن ویژگی به پیوند شماست:

<a href="https://www.webdesignerdepot.com/2013/04/how-to-use-the-download-attribute/myFolder/myImage.png" download>Download image</a>

نکته جالب در مورد این ویژگی این است که حتی می توانید یک نام برای فایل دانلودی تعیین کنید، حتی اگر نام آن نباشد. روی سرور شما این برای سایت‌هایی با نام فایل‌های پیچیده یا حتی تصاویری که به‌صورت پویا ایجاد شده‌اند، که می‌خواهند یک نام فایل ساده و کاربرپسند ارائه دهند، عالی است. برای ارائه یک نام، فقط یک علامت مساوی اضافه کنید، به دنبال آن نامی که می‌خواهید استفاده کنید در گیومه احاطه شده است، مانند:

<a href="https://www.webdesignerdepot.com/2013/04/how-to-use-the-download-attribute/myFolder/reallyUnnecessarilyLongAndComplicatedFileName.png" download="myImage">Download image</a>

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

پشتیبانی از مرورگر

در حال حاضر، فقط Chrome 14+ و Firefox 20+ از ویژگی دانلود پشتیبانی می‌کنند، بنابراین ممکن است لازم باشد به عقب برگردید. روی چند جاوا اسکریپت ساده برای تشخیص اینکه آیا ویژگی پشتیبانی می شود یا خیر. شما می توانید این کار را به این صورت انجام دهید:

var a = document.createElement('a');

if(typeof a.download != "undefined")
{
 // download attribute is supported
}
else
{
 // download attribute is not supported
}

نتیجه

با در نظر گرفتن همه چیزهایی که به HTML5 اضافه شده است، ویژگی دانلود بخش بسیار کوچکی است، اما به نظر من این یک ویژگی است که مدت هاست به تعویق افتاده بود و قطعاً در برنامه های امروزی هم برای استفاده و هم برای ساده سازی کاربرد دارد.

آیا ویژگی دانلود را پیاده سازی کرده اید؟ قهرمانان گمنام HTML5 شما چه هستند؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، دانلود تصویر از طریق Shutterstock.