دانلود فایل با استفاده از جاوااسکریپت/jQuery

من یک نیاز بسیار مشابه که در اینجا مشخص شده است دارم.

من نیاز دارم که مرورگر کاربر به صورت دستی دانلود را زمانی که $ ('a#someID').click(); اجرا میشود، شروع کند

اما نمیتوانم از روش window.href استفاده کنم، زیرا محتوای صفحه فعلی را با فایلی که قصد دانلود آن را دارید جایگزین میکند.

در عوض، من میخواهم دانلود را در پنجره/زبانهی جدید باز کنم. این چگونه ممکن است؟

پاسخ شماره ۱

استفاده از <iframe> نامرئی:

<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
    document.getElementById('my_iframe').src = url;
};
</script>

برای آنکه مرورگر را مجبور کنید فایلی را دانلود کند که در غیر اینصورت قادر به نمایش آن بود (مانند فایلهای HTML یا متنی)، نیاز دارید سرور نوع MIME فایل را به یک مقدار بیمعنی تنظیم کند، مانند application/x-please-download-me یا به طور جایگزین application/octet-stream، که برای دادههای باینری دلخواه استفاده میشود.

اگر فقط میخواهید آن را در یک تب جدید باز کنید، تنها راه انجام این کار این است که کاربر روی یک لینک با ویژگی target که روی _blank تنظیم شده است، کلیک کند.

در jQuery:

$('a#someID').attr({target: '_blank', 
                    href  : 'http://localhost/directory/file.pdf'});

هر زمان که آن لینک کلیک شود، فایل در یک تب/پنجره جدید دانلود خواهد شد.

پاسخ شماره ۲

بهروزرسانی مرورگرهای مدرن ۲۰۱۹

این رویکردی است که اکنون با چند نکته احتیاطی پیشنهاد میکنم:

• یک مرورگر نسبتاً مدرن مورد نیاز است
• اگر انتظار میرود فایل بسیار بزرگ باشد، احتمالاً باید کاری مشابه روش اصلی (iframe و کوکی) انجام دهید زیرا برخی از عملیات زیر احتمالاً حافظه سیستم به اندازه فایل دانلود شده و/یا سایر تأثیرات جالب CPU را مصرف میکنند.

fetch('https://jsonplaceholder.typicode.com/todos/1')
   // check to make sure you didn't have an unexpected failure (may need to check other things here depending on use case / backend)
  .then(resp => resp.status === 200 ? resp.blob() : Promise.reject('something went wrong'))
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    // or you know, something with better UX...
    alert('your file has downloaded!'); 
  })
  .catch(() => alert('oh no!'));

رویکرد اصلی jQuery/iframe/cookie در سال ۲۰۱۲

من افزونه jQuery File Download (دمو) (GitHub) را ایجاد کردهام که میتواند در وضعیت شما نیز مفید باشد. این افزونه تقریباً مشابه با یک iframe کار میکند اما برخی ویژگیهای جالب دارد که من آنها را بسیار کاربردی یافتهام:

• راهاندازی بسیار آسان با گرافیکهای زیبا (پنجره گفتگو jQuery UI، اما الزامی نیست)، همه چیز نیز تست شده است

• کاربر هرگز صفحهای که از آن دانلود فایل را آغاز کرده ترک نمیکند. این ویژگی برای برنامههای وب مدرن در حال تبدیل شدن به یک قابلیت حیاتی است

• توابع successCallback و failCallback به شما این امکان را میدهند که به طور صریح مشخص کنید کاربر در هر یک از موقعیتها چه چیزی میبیند

• در همکاری با jQuery UI، یک توسعهدهنده میتواند بهراحتی یک مودال نمایش دهد که به کاربر اطلاع دهد که یک فایل در حال دانلود است، پس از شروع دانلود مودال را ببندد یا حتی به شکل دوستانهای به کاربر اطلاع دهد که یک خطا رخ داده است. برای نمونهای از این، دموی مربوطه را ببینید.

در اینجا یک نمونه استفاده ساده با استفاده از منبع افزونه و وعدهها ارائه شده است. صفحهی نمایشی شامل بسیاری از مثالهای دیگر با 'تجربه کاربری بهتر' نیز میباشد.

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

پاسخ شماره ۳

function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    // If you don't know the name or want to use
    // the webserver default set name = ''
    link.setAttribute('download', name);
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    link.remove();
}

بررسی کنید که آیا مرورگر(های) مقصد شما اسکریپت بالا را بهصورت روان اجرا میکند یا نه:
http://caniuse.com/#feat=download

پاسخ شماره ۴

من تعجب کردهام که افراد کمی در مورد ویژگی download برای عناصر a میدانند. لطفاً کمک کنید تا این خبر را پخش کنیم! شما میتوانید یک لینک HTML مخفی داشته باشید و یک کلیک جعلی روی آن انجام دهید. اگر لینک HTML ویژگی download داشته باشد، فایل را دانلود میکند، نه اینکه آن را نمایش دهد، بدون توجه به هر چیزی. این کد است. اگر بتواند آن را پیدا کند، یک تصویر گربه را دانلود میکند.

document.getElementById('download').click();

<a href="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download id="download" hidden></a>

توجه: این در همه مرورگرها پشتیبانی نمیشود: http://www.w3schools.com/tags/att_a_download.asp

پاسخ شماره ۵

من استفاده از ویژگی download برای دانلود را به جای jQuery توصیه میکنم:

<a href="your_link" download> file_name </a>

این فایل شما را دانلود میکند، بدون اینکه آن را باز کند.

پاسخ شماره ۶

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

window.location.assign('any url or file path')

پاسخ شماره ۷

اگر شما قبلاً از jQuery استفاده میکنید، میتوانید از آن برای تولید یک قطعه کوچکتر استفاده کنید.
نسخه jQuery پاسخ اندرو:

var $idown;  // Keep it outside of the function, so it's initialized once.
downloadURL : function(url) {
  if ($idown) {
    $idown.attr('src',url);
  } else {
    $idown = $('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
  }
},
//... How to use it:
downloadURL('http://whatever.com/file.pdf');

پاسخ شماره ۸

در کروم، فایرفاکس و IE8 به بالا کار میکند.

var link=document.createElement('a');
document.body.appendChild(link);
link.href=url ;
link.click();

پاسخ شماره ۹

در نهایت از قطعه کد زیر استفاده کردم و در اکثر مرورگرها کار میکند، ولی در IE تست نشده است.

let data = JSON.stringify([{email: "[email ", name: "test"}, {email: "[email ", name: "anothertest"}]);

let type = "application/json", name = "testfile.json";
downloader(data, type, name)

function downloader(data, type, name) {
	let blob = new Blob([data], {type});
	let url = window.URL.createObjectURL(blob);
	downloadURI(url, name);
	window.URL.revokeObjectURL(url);
}

function downloadURI(uri, name) {
    let link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

بهروزرسانی

function downloadURI(uri, name) {
    let link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

function downloader(data, type, name) {
    let blob = new Blob([data], {type});
    let url = window.URL.createObjectURL(blob);
    downloadURI(url, name);
    window.URL.revokeObjectURL(url);
}

پاسخ شماره ۱۰

مثال ساده با استفاده از iframe

function downloadURL(url) {
    var hiddenIFrameID = 'hiddenDownloader',
        iframe = document.getElementById(hiddenIFrameID);
    if (iframe === null) {
        iframe = document.createElement('iframe');
        iframe.id = hiddenIFrameID;
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
    }
    iframe.src = url;
};

سپس فقط هر جایی که میخواهید، تابع را فراخوانی کنید:

downloadURL('path/to/my/file');