Cara memicu unduhan file saat mengklik tombol HTML atau JavaScript

Ini gila tapi saya tidak tahu bagaimana melakukan ini, dan karena seberapa umum kata-katanya, sulit untuk menemukan apa yang saya butuhkan di mesin pencari. Saya pikir ini harus mudah dijawab.

Saya ingin unduhan file sederhana, yang akan melakukan hal yang sama seperti ini:

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

Tapi saya ingin menggunakan tombol HTML, misalnya salah satu dari ini:

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

Demikian juga, mungkinkah memicu unduhan sederhana melalui JavaScript?

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

Saya pasti tidak mencari cara untuk membuat jangkar yang terlihat seperti tombol, menggunakan skrip back-end, atau mengacaukan dengan header server atau tipe mime.

Untuk tombolnya bisa Anda lakukan

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

Anda dapat memicu unduhan dengan downloadatribut HTML5 .

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

Dimana:

• path_to_fileadalah jalan yang resolve ke URL pada asal yang sama . Itu berarti halaman dan file harus berbagi domain, subdomain, protokol yang sama (HTTP vs. HTTPS), dan port (jika ditentukan). Pengecualian adalah blob:dan data:(yang selalu berhasil), dan file:(yang tidak pernah berhasil).
• proposed_file_nameadalah nama file yang akan disimpan. Jika kosong, peramban akan default ke nama file.

Dokumentasi: MDN , Standar HTML tentang pengunduhan , Standar HTML aktifdownload , CanIUse

HTML:

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

Dengan jQuery:

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

Utas lama tetapi tidak ada solusi js sederhana:

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)

Anda dapat melakukannya dengan "trik" dengan iframe yang tidak terlihat. Ketika Anda mengatur "src" untuk itu, browser bereaksi seolah-olah Anda akan mengklik tautan dengan "href" yang sama. Berbeda dengan solusi dengan formulir, ini memungkinkan Anda untuk menanamkan logika tambahan, misalnya mengaktifkan unduhan setelah batas waktu, ketika beberapa kondisi terpenuhi dll.

Ini juga sangat sunyi, tidak ada jendela / tab baru yang berkedip seperti saat menggunakan window.open.

HTML:

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

Javascript:

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

Versi Bootstrap

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

Didokumentasikan dalam Bootstrap 4 docs , dan berfungsi di Bootstrap 3 juga.

Saya pikir ini adalah solusi yang Anda cari

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

Saya menangani kasus di mana Javascript saya menghasilkan file CSV. Karena tidak ada URL jarak jauh untuk mengunduhnya, saya menggunakan implementasi berikut.

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

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

Bagaimana dengan:

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

Anda dapat menyembunyikan tautan unduhan dan mengklik tombol itu.

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

Jika Anda mencari solusi vanilla JavaScript (tanpa jQuery) dan tanpa menggunakan atribut HTML5 Anda bisa mencoba ini.

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>

Inilah yang akhirnya berhasil bagi saya karena file yang akan diunduh ditentukan ketika halaman dimuat.

JS untuk memperbarui atribut tindakan formulir:

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

Memanggil JS untuk memperbarui atribut tindakan formulir:

<body onLoad="setFormAction();">

Tag formulir dengan tombol kirim:

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

Berikut ini TIDAK berfungsi:

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

Jika Anda tidak dapat menggunakan formulir, pendekatan lain dengan unduhan cocok. Downloadjs menggunakan API file gumpalan dan html 5 di bawah tenda:

{downloadjs (url, nama file)}) />

* Ini sintaks jsx / reaksi, tetapi dapat digunakan dalam html murni

Di mana pun di antara Anda <body>dan </body>tag, masukkan tombol menggunakan kode di bawah ini:

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

Ini pasti berhasil!

Cara lain untuk dilakukan jika Anda memiliki URL yang kompleks seperti file.doc?foo=bar&jon=doeadalah menambahkan bidang tersembunyi di dalam formulir

<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>

terinspirasi pada jawaban @Cfreak yang tidak lengkap

Anda dapat menambahkan tag tanpa teks apa pun kecuali dengan tautan. dan ketika Anda mengklik tombol seperti yang Anda miliki dalam kode, jalankan saja fungsi $ ("yourlinkclass"). click ().

atribut unduhan melakukannya

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

Jika Anda menggunakan <a>tag, jangan lupa untuk menggunakan seluruh url yang mengarah ke file - yaitu:

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

Bagi saya tombol ading alih-alih anchor text berfungsi dengan sangat baik.

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

Mungkin tidak apa-apa menurut sebagian besar aturan, tetapi terlihat cukup bagus.