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

ایجاد لینک دانلود در HTML ساده است. یک تگ anchor اضافه کنید و به فایل در ویژگی “href” اشاره کنید. با این حال، برخی از انواع فایل‌ها دانلود نمی‌شوند. آنها در مرورگر باز می شوند. در این مورد استفاده از ویژگی “دانلود” را در نظر بگیرید.

اگر به وب‌سایت خود دسترسی سمت سرور دارید، راه‌حل‌هایی وجود دارد که می‌توانید از آنها استفاده کنید، مانند پیکربندی .htaccess، برای دانلود مستقیم این فایل ها. اگر سایت شما با یک سرویس رایگان مانند WordPress.com، Blogspot، یا شاید صفحات Github میزبانی می شود که به شما اجازه این کار را نمی دهند، استفاده از download صفت.

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

این download ویژگی بخشی از مشخصات HTML5 است و یک پیوند را به صورت دانلود پیوند به جای الف ناوبری ارتباط دادن.

نحو

1

<a href="download/acme-doc.txt" download>Download Text</a>

این download ویژگی به شما این امکان را می دهد که به صورت اختیاری نام فایل را پس از دانلود تغییر دهید. هنگامی که فایل روی سرور قرار دارد، به خصوص اگر به طور خودکار تولید شده باشد، این می تواند برای دادن فایلی با نام معقول تری هنگام دانلود به کاربران ایده آل باشد، شاید مانند: Acme Documentation (ver. 2.0.1).txt (پسوند فایل را فراموش نکنید).

در عمل به این صورت است:

1

<a href="download/acme-doc-2.0.1.txt" download="Acme Documentation (ver. 2.0.1).txt">Download Text</a>

آن را امتحان کنید در صفحه نمایشی، و باید فایل دانلود شده را با نام مشخص شده در آن پیدا کنید download صفت.

چند نکته:

• فایرفاکس فقط به کاربران اجازه می دهد فایل هایی با همان مبدا را دانلود کنند به دلیل یک نگرانی امنیتی. فایل باید از سرور یا نام دامنه خودتان باشد، در غیر این صورت در مرورگر باز می شود.
• در حالی که دانلود فایل‌های متقاطع در Chrome و آخرین نسخه Opera (با Chromium/Blink) مجاز است، هر دو این ویژگی را نادیده می‌گیرند. ارزش. به عبارت دیگر، نام فایل بدون تغییر باقی می ماند.

ارائه بازگشت به اینترنت برای اینترنت اکسپلورر

این download ویژگی در اینترنت اکسپلورر پیاده سازی نشده است، اگرچه توسط Edge پشتیبانی می شود.

به منظور اثبات گلوله، می‌توانیم یک بک گراند مناسب اضافه کنیم، مانند ارائه دستورالعمل‌های اضافی در زیر لینک دانلود برای مرورگرهایی که پشتیبانی نمی‌کنند. برای انجام این کار، ما باید دانلود کنیم مدرنیزر با download تست ویژگی گنجانده شده است.

سپس می توانیم اسکریپت زیر را اضافه کنیم.

1

if ( ! Modernizr.adownload ) {

2

	var $link = $('a');

3

4

	$link.each(function() {

5

		var $download = $(this).attr('download');

6

7

		if (typeof $download !== typeof undefined && $download !== false) {

8

      var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"');

9

      $el.insertAfter($(this));

10

		}

11

12

	});

13

}

این اسکریپت آزمایش می کند که آیا مرورگر از آن پشتیبانی می کند یا خیر download صفت؛ در غیر این صورت یک مورد جدید اضافه می کند <div> با کلاس برای اهداف سبک و همچنین متن دستورالعمل، و آن را بلافاصله در زیر هر پیوندی که با download صفت.

نتیجه

HTML5 download ویژگی مدیریت لینک های دانلود را برای هر کسی که به پیکربندی سمت سرور دسترسی ندارد بسیار راحت می کند.

HTML بیشتر بیاموزید