Cara memicu unduhan file saat mengklik tombol HTML atau JavaScript

434

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.

brentonstrine
sumber
15
Terima kasih kepada Anda "bagaimana memicu unduhan file dalam javascript" akan memberikan jawaban jauh lebih cepat untuk setiap pencari masa depan.
Danubian Sailor

Jawaban:

278

Untuk tombolnya bisa Anda lakukan

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>
Cfreak
sumber
Anda dapat menyimpan tag formulir dan menambahkan onclick ke tag tombol.
Florian Leitgeb
12
tidak berfungsi sebagai pemicu, cukup arahkan kembali ke url sebagai tag 'a'.
fdrv
7
Ini berfungsi lebih baik: <a href="path_to_file" download="proposed_file_name"> Unduh </a>
kscius
11
@kscius bahkan hari ini atribut unduhan tidak didukung di IE 11 (sekarang didukung di Edge) dan tidak didukung di Safari. Pada tahun 2012 ketika jawaban awalnya diposting itu tidak didukung di browser utama apa pun.
Cfreak
1
apa perbedaan antara memiliki jangkar dengan penataan tombol dan memiliki bentuk dengan tombol?
Andrei Epure
444

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

Joe Pigott
sumber
37
Tidak Bekerja dengan Safari dan versi IE tertentu
Mohamed Hussain
4
Menggunakan kombinasi downloaddan target="_blank"tampaknya cukup untuk menutupi sebagian besar kasus penggunaan. Peramban yang memahami downloadmemperlakukannya sebagai unduhan, jika tidak dibuka di tab baru.
MK10
10
Bagaimana ini bisa diterapkan ke objek tombol, bukan hanya tag ?
storm_m2138
8
Sebenarnya ini hanya berfungsi untuk url dengan asal yang sama seperti yang disebutkan dalam dokumen MDN. Ini adalah batasan yang sangat besar jika kami ingin mengembangkan solusi generik
Akshat Gupta
6
Pertanyaannya secara eksplisit meminta untuk menggunakan tombol alih-alih tautan
Quentin
87

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>
mengantuk
sumber
8
Solusi terbaik dan paling bersih. Tapi Anda tidak perlu Javascript tambahan di sini. Bagian HTML dengan onclick sudah cukup.
Florian Leitgeb
4
Bagaimana jika saya ingin mengunduh file xml?
g07kore
2
Terima kasih untuk kodemu. Saya telah menguji, ia dapat bekerja di IE, Chrome, Firefox.
muthukumar
6
Jika Anda memiliki file yang dapat diterima oleh browser seperti PDF, file itu akan terbuka di tab baru untuk menampilkan dialog unduhan.
WindRider
1
window.open dapat memicu pemblokiran sembulan di browser dan karenanya tidak disarankan. Anda dapat menggunakan window.location = 'path', meskipun itu akan menuju lokasi di jendela browser yang sama.
Elendurwen
68

Dengan jQuery:

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});
Matt Ball
sumber
1
Sempurna terima kasih. Apakah Anda tahu jika sebagian besar server akan menetapkan Content-Disposition menjadi 'attachment' secara default?
brentonstrine
5
Tidak ada "sebagian besar." Itu sepenuhnya tergantung. Jangan mengandalkan itu sedang diatur.
Matt Ball
3
Masalah ini telah membuat saya balistik, dan ini adalah satu-satunya pilihan yang berfungsi (dan didukung oleh IE). Saya akan menambahkan untuk n00bs seperti saya yang mengatur Disposisi Konten, yang harus Anda lakukan adalah: <? Php header ('Content-Disposition: attachment; filename = "filename.here"'); ?>
user124384
3
Tidak jquery Titik.
Adam Arold
1
Doest ini berfungsi jika Anda mencoba mengunduh gambar, itu akan membuka gambar di browser
Dheeraj
34

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)
Stefanos Chrs
sumber
24
@NicholasKyriakides Jenis mengingatkan saya pada permata ini: image.ibb.co/dtkUWJ/Selection_002.png
Stefanos Chrs
@BryanLarsen versi FF apa?
Stefanos Chrs
1
@BryanLarsen Anda benar, Firefox tidak mengizinkan ini tanpa menambahkan elemen ke badan terlebih dahulu. Terima kasih, memperbarui jawabannya
Stefanos Chrs
1
Apakah ada cara agar fungsi javascript dipicu setelah unduhan selesai? Hanya mencoba menampilkan pesan setelah unduhan dimulai dan menghapus pesan setelah unduhan selesai.
mohit bansal
1
@mohitbansal (un) untungnya tidak karena berada di level browser
Stefanos Chrs
23

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";
}
Pelaut Danubia
sumber
Ya, setidaknya jika Anda benar-benar menambahkan iframe ke document.body.
yxhuvud
1
Tampaknya ini tidak berfungsi di Chrome sekarang, meskipun dulu berfungsi. Saya bertanya-tanya apakah itu agak berhenti bekerja di berbagai versi Chrome.
Dobes Vandermeer
Bekerja di Chrome pada Versi 61.0.3163.100 (Bangun Resmi) (64-bit)
AndrewBenjamin
Tidak berfungsi dengan gambar di Firefox v57. Itu hanya membuat gambar di iframe.
Antony
15

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.

Dukungan CFP
sumber
9
Satu-satunya hal yang harus dilakukan dengan Bootstrap adalah nama kelas, itu hanya kekuatan HTML5.
Machado
3
Pertanyaannya adalah secara eksplisit menanyakan bagaimana melakukan ini dengan tombol alih-alih tautan.
Quentin
2
jika Anda tahu apa-apa tentang bootstrap, Anda akan melihat bahwa itu ADALAH tombol.
John Lord
11

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);
}
Delconis
sumber
pada 404 -> halaman berubah menjadi halaman kesalahan 404. masalah yang sama seperti yang dinyatakan pada location.hrefsolusi lain .
BananaAcid
9

Bagaimana dengan:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
olli
sumber
5
Ini tidak berfungsi, jika file Anda, misalnya, adalah gambar, karena itu hanya akan dibuka di browser.
Juggernaut
Masalah lain terjadi yaitu jika file tersebut hilang itu menavigasi seluruh halaman ke halaman 404
Hugheth
7

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>
Starwarswii
sumber
Agar ini berfungsi di Firefox, sumber harus berada pada domain yang sama dengan dokumen. Pengaturan header CORS tidak membantu.
Antony
2
Jangan pernah melakukan ini
Wannes
@ Kenapa tidak?
Starwarswii
4

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>

David Willhite
sumber
1

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();">
slayernoah
sumber
mungkin karena jika Anda memiliki file pada waktu buka, tidak bisakah Anda membuat tindakan pada server menggunakan mesin templating? mengapa perlu kode js?
Andrei Epure
1

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

Gleb Dolzikov
sumber
Untuk menghindari masalah CORS untuk gambar di domain lain, masukkan crossorigin = "anonim" ke dalam tag img, seperti ini: <img src = "image.png" crossorigin = "anonim" />
Jonathan Harris
0

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!

Ronaldo
sumber
1
Untuk Chrome, ini adalah solusi hebat
Hayk Aramyan
1
Juga tidak berfungsi di Safari: Sekolah W3
Alex
2
Tidak bekerja di browser MS adalah masalah yang agak besar dan Chrome tidak selalu akan menjadi jawabannya.
SudoKid
Anda tidak dapat memasukkan tautan ke dalam tombol dalam HTML
Quentin
0

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

Bellash
sumber
0

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 ().

Ini ikan
sumber
-1

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>
Rohallah Hatami
sumber
2
Saya suka jawaban Anda
George C.
2
Pertanyaannya adalah secara eksplisit menanyakan bagaimana melakukan ini dengan tombol alih-alih tautan.
Quentin
-6

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>
Menandai
sumber
Saya kira bukan itu masalahnya di sini. Juga jalur "absolut" tidak diperlukan jika tautan berada di jalur yang sama dengan file.
Rocket Hazmat
@Rocket - Anda, tentu saja, benar tentang jalur absolut, namun, itu adalah cara terbaik untuk memastikan untuk memperbaikinya. Saya akan menyerahkannya ke OP untuk memutuskan apakah itu membantu -
Mark
Pertanyaannya adalah secara eksplisit menanyakan bagaimana melakukan ini dengan tombol alih-alih tautan.
Quentin
atribut unduhan tidak ada dalam solusi ini. Bahkan setelah menambahkan atribut unduhan, itu tidak akan berfungsi untuk lintas domain.
s sharif
-6

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.

Brana
sumber
5
Ini hanya berfungsi karena browser Anda tidak mendukung file .doc.
Disain oleh Adrian
HTML Anda tidak valid. <a>elemen mungkin tidak mengandung <button>elemen.
Quentin
apakah selalu seperti itu? Jawaban ini berumur dua tahun ketika Anda berkomentar.
John Lord