web-gelistirme-sc.com

Bir HTML düğmesini veya JavaScript'i tıklatırken dosya indirme nasıl tetiklenir

Bu çılgınca ama bunu nasıl yapacağımı bilmiyorum ve kelimeler ne kadar yaygın olduğu için arama motorlarında ihtiyacım olanı bulmak zor. Bunun cevaplaması kolay bir fikir olacağını düşünüyorum.

Basit bir dosya indirme istiyorum, bu da aynısını yapar:

<a href="file.doc">Download!</a>

Ancak, örneğin bir HTML düğmesini kullanmak istiyorum. bunlardan herhangi biri:

<input type="button" value="Download!">
<button>Download!</button>

Aynı şekilde, JavaScript ile basit bir indirme işlemini başlatmak mümkün mü?

$("#fileRequest").click(function(){ /* code to download? */ });

Kesinlikle değil düğme gibi görünen bir bağlantı oluşturmanın, arka uç komut dosyalarını kullanmanın ya da sunucu başlıkları veya mime türleriyle uğraşmanın bir yolunu arıyorum.

353
brentonstrine

Düğme için yapabilirsiniz

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>
244
Cfreak

Bazı araştırmalar yaptım ve en iyi cevabı buldum. Yeni HTML5 download niteliğini kullanarak indirmeyi tetikleyebilirsiniz.

<a href="path_to_file" download="proposed_file_name">Download</a>

Nerede :

  • path_to_file, mutlak veya göreceli bir yoldur,
  • proposed_file_name kaydedilecek dosya adı (boş olabilir, ardından varsayılan dosya adı varsayılandır).

Umarım bu yardımcı olur.

WhatwgBelgeler

Kullanabilirmiyim

377
Joe Pigott

JQuery ile:

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});
64
Matt Ball

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>
62
sleepyup

Görünmez iframe ile "hile" ile yapabilirsiniz. "Src" yi ayarladığınızda, tarayıcı aynı "href" ile bir linke tıklarmışsınız gibi tepki verir. Formlu çözümün tersine, bazı koşullar yerine getirildiğinde vb. Zaman aşımından sonra indirmeyi etkinleştirme gibi ek bir mantık yerleştirmenize olanak tanır.

Aynı zamanda çok sessiz, window.open kullanırken olduğu gibi yanıp sönen yeni bir pencere/sekme yok.

HTML:

<iframe id="invisible" style="display:none;"></iframe>

JavaScript:

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}
21
Danubian Sailor

Eski iş parçacığı ama basit bir js çözümü eksik:

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
16
Stefanos Chrs

Önyükleme Sürümü

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

Belgeler Bootstrap 4'te dokümanlar , ve Bootstrap 3'te de çalışır.

12
CFP Support

Sanırım aradığınız çözüm bu.

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

Javascript'in bir CSV dosyası oluşturduğu bir davadan nefret ediyorum. İndirilecek uzak URL olmadığı için aşağıdaki uygulamayı kullanıyorum.

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}
8
Delconis

Ne dersin:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
7
olli

İndirme bağlantısını gizleyebilir ve düğmeyi tıklatarak yapabilirsiniz.

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>
6
Starwarswii

Eğer bir Vanilla JavaScript (jQuery yok) çözümü arıyorsanız ve HTML5 özelliğini kullanmadan deneyebilirsiniz.

const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}
.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}
<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>
3
David Willhite
 <a href="complexDownload" download="file.doc" onclick="this.href='file.doc';">
     <button>Download <i>File.doc</i> Now!</button>
 </a>

Safari'de çalışmıyor gibi görünüyor, ancak Chrome'da çalışıyordu. Ayrıca, kullanıcı tıklattıktan sonra bağlantının href niteliğini değiştirmek, IE'nin eski sürümlerinde çalışmasını sağladı, ancak IE veya Edge'in son sürümlerinde çalışmadı.

1
IamGuest

<body> ve </body> etiketleriniz arasında herhangi bir yere, aşağıdaki kodu kullanarak bir düğmeye basın:

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

Bu kesinlikle işe yarayacak!

1
Ronaldo

Sayfa yüklendiğinde indirilecek dosya belirlendiğinden, bu benim için nihayet çalıştı.

Formun eylem niteliğini güncellemek için JS:

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

Formun eylem niteliğini güncellemek için JS'yi çağırma:

<body onLoad="setFormAction();">

Gönder butonu ile form etiketi:

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

Aşağıdakiler yaptıDEĞILwork:

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">
1
slayernoah

Formu kullanamıyorsanız, downloadjs fit Nice ile başka bir yaklaşım kullanın. Downloadjs başlık altında blob ve html 5 dosya API'sini kullanır:

{downloadjs (url, dosya adı)}) />

* Bu jsx/reaksiyon sözdizimi, ancak saf html'de kullanılabilir

1
Gleb Dolzikov

file.doc?foo=bar&jon=doe gibi karmaşık bir URL’niz varsa yapmanın başka bir yolu da formun içine gizli alan eklemektir.

<form method="get" action="file.doc">
  <input ty='hidden' name='foo' value='bar'/>
  <input ty='hidden' name='john' value='doe'/>
  <button type="submit">Download Now</button>
</form>

@Cfreak cevabından esinlenerek tamamlanmadı

0
Bellash

indirme özelliğini yap

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>
0
Rohallah Hatami

Basitçe kullanabilirsiniz:

<form action="/file.doc" align="center"> <input type="submit" id="custom-buttons" value="Click Here To Download" /> </form>

0
MartinNajemi