Javascript/jQuery Kullanarak Dosya İndirme

Benim de burada belirtilen çok benzer bir gereksinimim var.

$('a#someID').click();` olduğunda kullanıcının tarayıcısının manuel olarak bir indirme başlatmasını sağlamam gerekiyor.

Ancak window.href yöntemini kullanamıyorum, çünkü mevcut sayfa içeriğini indirmeye çalıştığınız dosya ile değiştiriyor.

Bunun yerine indirmeyi yeni pencerede/sekmede açmak istiyorum. Bu nasıl mümkün olabilir?

Çözüm

Görünmez bir <iframe> kullanın:


<script>
function Download(url) {
    document.getElementById('my_iframe').src = url;
};
</script>

Tarayıcıyı başka türlü işleyebileceği bir dosyayı (HTML veya metin dosyaları gibi) indirmeye zorlamak için, sunucunun dosyanın MIME Type değerini application/x-please-download-me veya alternatif olarak rastgele ikili veriler için kullanılan application/octet-stream gibi saçma bir değere ayarlaması gerekir.

Yalnızca yeni bir sekmede açmak istiyorsanız, bunu yapmanın tek yolu kullanıcının hedef niteliği _blank olarak ayarlanmış bir bağlantıya tıklamasıdır.

JQuery'de:

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

Bu bağlantıya her tıklandığında, dosya yeni bir sekmede/pencerede indirilecektir.

Yorumlar (21)

2019 modern tarayıcı güncellemesi

Birkaç uyarıyla birlikte şimdi önereceğim yaklaşım budur:

  • Nispeten modern bir tarayıcı gereklidir
  • Dosyanın çok büyük olması bekleniyorsa, muhtemelen orijinal yaklaşıma (iframe ve çerez) benzer bir şey yapmalısınız çünkü aşağıdaki işlemlerden bazıları muhtemelen en az indirilen dosya kadar büyük sistem belleği tüketebilir ve/veya diğer ilginç CPU yan etkileri olabilir.
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .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);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

2012 orijinal jQuery/iframe/cookie tabanlı yaklaşım

Sizin durumunuza da yardımcı olabilecek jQuery File Download eklentisini (Demo) (GitHub) oluşturdum. Bir iframe ile oldukça benzer şekilde çalışır, ancak oldukça kullanışlı bulduğum bazı harika özelliklere sahiptir:

  • Güzel görsellerle kurulumu çok kolay (jQuery UI Dialog, ancak gerekli değil), her şey de test edildi

  • Kullanıcı, dosya indirme işlemini başlattığı sayfadan asla ayrılmaz. Bu özellik modern web uygulamaları için çok önemli hale geliyor

  • successCallback ve failCallback işlevleri, kullanıcının her iki durumda da ne göreceği konusunda açık olmanızı sağlar

  • JQuery UI ile birlikte bir geliştirici, kullanıcıya bir dosya indirme işleminin gerçekleştiğini bildiren bir modalı kolayca gösterebilir, indirme başladıktan sonra modalı dağıtabilir veya hatta bir hata oluştuğunu kullanıcıya dostça bir şekilde bildirebilir. Bunun bir örneği için Demo'ye bakın. Umarım bu birilerine yardımcı olur!

İşte eklentiyi kaynak vaatlerle kullanan basit bir kullanım örneği demosu. Demo sayfası]2 başka birçok 'daha iyi UX' örneği de içerir.

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

Zaten jQuery kullanıyorsanız, daha küçük bir snippet üretmek için bundan yararlanabilirsiniz Andrew'un cevabının jQuery versiyonu:

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');
Yorumlar (7)