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.
javascript
html
download
brentonstrine
sumber
sumber
Jawaban:
Untuk tombolnya bisa Anda lakukan
sumber
Anda dapat memicu unduhan dengan
download
atribut HTML5 .Dimana:
path_to_file
adalah 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 adalahblob:
dandata:
(yang selalu berhasil), danfile:
(yang tidak pernah berhasil).proposed_file_name
adalah nama file yang akan disimpan. Jika kosong, peramban akan default ke nama file.Dokumentasi: MDN , Standar HTML tentang pengunduhan , Standar HTML aktif
download
, CanIUsesumber
download
dantarget="_blank"
tampaknya cukup untuk menutupi sebagian besar kasus penggunaan. Peramban yang memahamidownload
memperlakukannya sebagai unduhan, jika tidak dibuka di tab baru.HTML:
sumber
Dengan jQuery:
sumber
Utas lama tetapi tidak ada solusi js sederhana:
sumber
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:
Javascript:
sumber
Versi Bootstrap
Didokumentasikan dalam Bootstrap 4 docs , dan berfungsi di Bootstrap 3 juga.
sumber
Saya pikir ini adalah solusi yang Anda cari
Saya menangani kasus di mana Javascript saya menghasilkan file CSV. Karena tidak ada URL jarak jauh untuk mengunduhnya, saya menggunakan implementasi berikut.
sumber
location.href
solusi lain .Bagaimana dengan:
sumber
Anda dapat menyembunyikan tautan unduhan dan mengklik tombol itu.
sumber
Jika Anda mencari solusi vanilla JavaScript (tanpa jQuery) dan tanpa menggunakan atribut HTML5 Anda bisa mencoba ini.
sumber
Inilah yang akhirnya berhasil bagi saya karena file yang akan diunduh ditentukan ketika halaman dimuat.
JS untuk memperbarui atribut tindakan formulir:
Memanggil JS untuk memperbarui atribut tindakan formulir:
Tag formulir dengan tombol kirim:
Berikut ini TIDAK berfungsi:
sumber
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
sumber
Di mana pun di antara Anda
<body>
dan</body>
tag, masukkan tombol menggunakan kode di bawah ini:Ini pasti berhasil!
sumber
Cara lain untuk dilakukan jika Anda memiliki URL yang kompleks seperti
file.doc?foo=bar&jon=doe
adalah menambahkan bidang tersembunyi di dalam formulirterinspirasi pada jawaban @Cfreak yang tidak lengkap
sumber
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 ().
sumber
atribut unduhan melakukannya
sumber
Jika Anda menggunakan
<a>
tag, jangan lupa untuk menggunakan seluruh url yang mengarah ke file - yaitu:sumber
Bagi saya tombol ading alih-alih anchor text berfungsi dengan sangat baik.
Mungkin tidak apa-apa menurut sebagian besar aturan, tetapi terlihat cukup bagus.
sumber
<a>
elemen mungkin tidak mengandung<button>
elemen.