HTML düğmesine veya JavaScript'e tıklandığında dosya indirme işlemi nasıl tetiklenir

Bu çılgınca ama bunu nasıl yapacağımı bilmiyorum ve kelimelerin ne kadar yaygın olduğu nedeniyle, arama motorlarında neye ihtiyacım olduğunu bulmak zor. Bunun cevaplaması kolay bir şey olacağını düşünüyorum.

Ben basit bir dosya indirme, bu aynı şeyi istiyorum:

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

Ama bir HTML düğmesi kullanmak istiyorum, örneğin:

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

Benzer şekilde, JavaScript yoluyla basit bir indirme işlemini başlatmak mümkün müdür?

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

Kesinlikle bir düğmeye benzeyen bir çapa oluşturmak, herhangi bir arka uç komut dosyası kullanmak veya sunucu üstbilgileri veya mime türleri ile karışıklık için bir yol aramıyorum .

Düğme için şunları yapabilirsiniz

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

Bir indirme işlemini HTML5 downloadözelliğiyle tetikleyebilirsiniz .

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

Nerede:

• path_to_fileaynı kaynaktan gelen bir URL'ye çözümlenen bir yoldur . Bu, sayfanın ve dosyanın aynı etki alanını, alt etki alanını, protokolü (HTTP ve HTTPS) ve bağlantı noktasını (belirtilmişse) paylaşması gerektiği anlamına gelir. İstisnalar vardır blob:ve data:(ki her zaman iş) ve file:(asla işe yaramaz olan).
• proposed_file_namekaydedilecek dosya adıdır. Boşsa, tarayıcı varsayılan olarak dosyanın adını kullanır.

Belgeler: MDN , İndirme sırasında HTML Standardıdownload , HTML Standardı açık , CanIUse

HTML:

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

JQuery ile:

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

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)

Görünmez iframe ile "hile" ile yapabilirsiniz. Buna "src" ayarladığınızda, tarayıcı aynı "href" değerine sahip bir bağlantıyı tıklatır gibi davranır. Formlu çözümün tersine, örneğin bazı zaman aşımlarından sonra, bazı koşullar karşılandığında indirmeyi etkinleştirmek gibi ek mantık yerleştirmenize olanak tanır.

Ayrıca çok silikadır, kullanırken yeni bir pencere / sekme yanıp sönmez window.open.

HTML:

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

JavaScript:

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

Bootstrap Sürümü

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

Bootstrap 4 belgelerinde belgelenmiştir ve Bootstrap 3'te de çalışır.

Bence aradığınız çözüm bu

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

Javascript'imin bir CSV dosyası oluşturduğu bir durumdan nefret ediyorum. İndirilecek uzak URL olmadığından 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);
}

Ne dersin:

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

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

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

Vanilya JavaScript (jQuery yok) çözümü arıyorsanız ve HTML5 özniteliğini kullanmadan bunu 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>

İndirilecek dosya sayfa yüklendiğinde belirlendiği için nihayet benim için işe yaradı.

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

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

Formun eylem özelliğini güncellemek için JS çağrısı:

<body onLoad="setFormAction();">

Gönder düğmesiyle form etiketi:

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

Aşağıdaki vermedi DEĞİL çalışır:

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

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

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

* bu jsx / tepki sözdizimi, ancak saf html'de kullanılabilir

<body>Ve </body>etiketleriniz arasında herhangi bir yere aşağıdaki kodu kullanarak bir düğme yerleştirin:

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

Bu kesinlikle işe yarar!

file.doc?foo=bar&jon=doeFormun içine gizli alan eklemek gibi karmaşık bir URL'niz olması durumunda bunu yapmanın başka bir yolu da

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

tamamlanmamış olan @Cfreak cevabından ilham aldı

herhangi bir metin olmadan ancak bağlantı içeren etiket ekleyebilirsiniz. ve kodunuzda olduğu gibi düğmeyi tıklattığınızda, $ ("yourlinkclass") komutunu çalıştırmanız yeterlidir.

indirme özelliği 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>

Eğer kullanırsanız <a>etiketi, hangi dosyaya açar tamamını url kullanmak unutma - yani:

<a href="http://www.example.com/folder1/file.doc">Download</a>

Benim için bağlantı metni yerine reklam düğmesi gerçekten iyi çalışıyor.

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

Çoğu kuralda iyi olmayabilir, ancak oldukça iyi görünüyor.