Saya memiliki persyaratan yang sangat mirip yang ditentukan di sini .
Saya harus meminta browser pengguna memulai pengunduhan secara manual ketika $('a#someID').click();
Tetapi saya tidak dapat menggunakan window.href
metode ini, karena ini menggantikan konten halaman saat ini dengan file yang Anda coba unduh.
Sebaliknya saya ingin membuka unduhan di jendela / tab baru. Bagaimana ini mungkin?
javascript
jquery
download
Mithun Sreedharan
sumber
sumber
Jawaban:
Gunakan yang tidak terlihat
<iframe>
:Untuk memaksa browser mengunduh file yang seharusnya dapat dirender (seperti file HTML atau teks), Anda memerlukan server untuk mengatur Jenis MIME file ke nilai yang tidak masuk akal, seperti
application/x-please-download-me
atau sebagai alternatifapplication/octet-stream
, yang digunakan untuk biner acak data.Jika Anda hanya ingin membukanya di tab baru, satu-satunya cara untuk melakukan ini adalah bagi pengguna untuk mengklik pada tautan dengan
target
atributnya diatur ke_blank
.Di jQuery:
Setiap kali tautan itu diklik, ia akan mengunduh file di tab / jendela baru.
sumber
iframe.style.display = 'none';
karena ini akan sepenuhnya menyembunyikan iframe. Implementasi Anda saat ini akan membuat iframe tidak terlihat, tetapi iframe masih akan memakan ruang di bagian bawah halaman yang menyebabkan ruang ekstra putih.Content-Disposition: attachment; filename="downloaded.pdf"
(tentu saja Anda dapat menyesuaikan nama file sesuai kebutuhan).2019 pembaruan browser modern
Inilah pendekatan yang sekarang saya rekomendasikan dengan beberapa peringatan:
2012 pendekatan berbasis jQuery / iframe / cookie asli
Saya telah membuat plugin Unduhan File jQuery ( Demo ) ( GitHub ) yang juga dapat membantu situasi Anda. Ini berfungsi sangat mirip dengan iframe tetapi memiliki beberapa fitur keren yang menurut saya cukup berguna:
Sangat mudah diatur dengan visual yang bagus (jQuery UI Dialog, tetapi tidak diharuskan), semuanya juga diuji
Pengguna tidak pernah meninggalkan halaman yang sama dengan tempat mereka memulai unduhan file. Fitur ini menjadi sangat penting untuk aplikasi web modern
Fungsi successCallback dan failCallback memungkinkan Anda untuk secara eksplisit tentang apa yang dilihat pengguna dalam kedua situasi tersebut
Sehubungan dengan jQuery UI, pengembang dapat dengan mudah menunjukkan modal yang memberi tahu pengguna bahwa terjadi unduhan file, membubarkan modal setelah unduhan dimulai atau bahkan memberi tahu pengguna dengan ramah bahwa ada kesalahan. Lihat Demo untuk contohnya. Semoga ini bisa membantu seseorang!
Berikut ini adalah contoh penggunaan sederhana menggunakan sumber plugin dengan janji. The halaman demo mencakup banyak lainnya, 'lebih baik UX' contoh juga.
sumber
Periksa apakah browser target Anda akan menjalankan potongan di atas dengan lancar:
http://caniuse.com/#feat=download
sumber
document.body.appendChild(link)
sebelum klik dan setelah klik yang dapat Anda lakukanlink.remove()
untuk menghindari mencemari DOM.link.download = ""
agar tetap mempertahankan nama file aslinya dan untuk tidak menyetelnya.Saya terkejut tidak banyak orang tahu tentang atribut unduhan untuk suatu elemen. Tolong bantu sebarkan berita tentang itu! Anda dapat memiliki tautan html tersembunyi, dan memalsukan klik di atasnya. Jika tautan html memiliki atribut unduhan, ia mengunduh file, bukan melihatnya, apa pun yang terjadi. Ini kodenya. Ini akan mengunduh gambar kucing jika dapat menemukannya.
Catatan: Ini tidak didukung di semua browser: http://www.w3schools.com/tags/att_a_download.asp
sumber
mp4
sSaya sarankan menggunakan yang
download
atribut untuk di-download bukannya jQuery:Ini akan mengunduh file Anda, tanpa membukanya.
sumber
Jika Anda sudah menggunakan jQuery, Anda bisa memanfaatkannya untuk menghasilkan potongan yang lebih kecil
. Versi jQuery dari jawaban Andrew:
sumber
if
pernyataan benar-benar harus:if( $idown && $idown.length > 0 )
Bekerja di Chrome, Firefox, dan IE8 dan di atasnya.
sumber
url
, bukan mengunduh darinya.Contoh sederhana menggunakan
iframe
Kemudian panggil saja fungsi di mana pun Anda inginkan:
downloadURL('path/to/my/file');
sumber
Ini bisa membantu jika Anda tidak perlu menavigasi halaman lain. Ini adalah fungsi dasar javascript, sehingga dapat digunakan di platform mana pun di mana backend berada dalam Javascript
sumber
Hanya tujuh tahun kemudian di sini datang solusi jQuery satu baris menggunakan formulir, bukan iframe atau tautan:
Saya sudah menguji ini
Jika ada yang tahu ada kerugian dengan solusi ini saya akan sangat senang mendengarnya.
Demo penuh:
sumber
filePath
memiliki querystring karena mengirimkan formulir akan menimpa querystring dalam atribut action.var authInput = $("<input>").attr("type", "hidden").attr("name", "myQsKey").val('MyQsValue');
$('<form></form>') .attr('action', filePath) .append($(authInput)) .appendTo('body').submit().remove();
Ini adalah akses yang setara:filepath?myQsKey=myValue
window.location
kefilePath
. Hanyawindow.location = filePath;
akan melakukan hal yang sama.download
atribut dengan cara ini untuk memberi tahu browser bahwa Anda ingin mengunduh terlepas dari header apa yang dikembalikan server, yang dapat Anda lakukan dengan sebuaha
elemen.)Saya tidak tahu apakah pertanyaannya terlalu lama, tetapi pengaturan window.lokasi ke url unduhan akan berfungsi, asalkan tipe unduhan mime benar (misalnya arsip zip).
sumber
Saya akhirnya menggunakan potongan di bawah ini dan berfungsi di sebagian besar browser, tidak diuji di IE sekalipun.
Memperbarui
sumber
MouseEvent
sini daripada selalu menggunakanclick
? Dan mengapa menambahkan tautan ke dokumen sebelum mengkliknya? Mungkin ini memiliki keunggulan dibandingkan pendekatan sederhana yang ditampilkan di stackoverflow.com/a/23013574/1709587 , tetapi jika demikian, mereka tidak dijelaskan di sini.Untuk meningkatkan jawaban Imagine Breaker, ini didukung pada FF & IE:
Dengan kata lain, cukup gunakan
dispatchEvent
fungsi alih-alihclick()
;sumber
Mungkin javascript Anda hanya membuka halaman yang baru saja mengunduh file, seperti saat Anda menyeret tautan unduhan ke tab baru:
Dengan jendela yang terbuka, buka halaman unduhan yang otomatis ditutup.
sumber
Kode Paling Lengkap dan Berfungsi (Diuji) untuk Mengunduh Data Untuk FireFox, Chrome dan Kode IE adalah Mengikuti. Asumsikan bahwa Data berada dalam bidang texarea , yang memiliki id = 'textarea_area' dan nama file adalah nama file tempat data akan diunduh.
dan kemudian panggil saja
Untuk Memulai Pengunduhan.
Array untuk pengaturan tipe MIME yang benar untuk dialog unduhan DAPAT mengikuti:
sumber
bagi saya ini berfungsi ok diuji di chrome v72
sumber
Saya memiliki hasil yang baik dengan menggunakan tag FORMULIR karena ia bekerja di mana-mana dan Anda tidak perlu membuat file sementara di server. Metodenya bekerja seperti ini.
Di sisi klien (halaman HTML) Anda membuat formulir yang tidak terlihat seperti ini
Kemudian Anda menambahkan kode Javascript ini ke tombol Anda:
Di sisi server Anda memiliki kode PHP berikut
download.php
:Anda bahkan dapat membuat file zip data Anda seperti ini:
Bagian terbaiknya adalah tidak meninggalkan file residu di server Anda karena semuanya dibuat dan dihancurkan dengan cepat!
sumber
Jawaban yang diajukan oleh hitesh pada 30 Desember '13 ternyata bekerja. Itu hanya membutuhkan sedikit penyesuaian:
File PHP dapat memanggil dirinya sendiri. Dengan kata lain, cukup buat file bernama saveAs.php, dan masukkan kode ini ke dalamnya ...
sumber
Fungsi-fungsi ini digunakan di stacktrace.js :
sumber
Saya sarankan Anda menggunakan acara mousedown, yang disebut SEBELUM acara klik. Dengan begitu, browser menangani acara klik secara alami, yang menghindari keanehan kode:
sumber
Solusi Excelent dari Corbacho, saya baru saja beradaptasi untuk menyingkirkan var
sumber
Firefox dan Chrome diuji:
Ini sebenarnya adalah solusi cara "chrome" untuk firefox (saya tidak mengujinya di browser lain, jadi silakan tinggalkan komentar tentang kompilabilitas)
sumber
Ada begitu banyak hal kecil yang dapat terjadi ketika mencoba mengunduh file. Ketidakkonsistenan antara browser saja adalah mimpi buruk. Saya akhirnya menggunakan perpustakaan kecil yang hebat ini. https://github.com/rndme/download
Yang menyenangkan tentang itu adalah fleksibel untuk tidak hanya url tetapi untuk data sisi klien yang ingin Anda unduh.
sumber
Menggunakan tag jangkar dan PHP itu bisa dilakukan, Periksa jawaban ini
JQuery Ajax call untuk mengunduh file PDF
Saya memeriksa ukuran file karena jika Anda memuat pdf dari CDN cloudfront, Anda tidak akan mendapatkan ukuran dokumen yang memaksa dokumen untuk mengunduh dalam 0kb, Untuk menghindari hal ini saya memeriksa dengan kondisi ini
sumber
Saya tahu saya terlambat ke pesta, tetapi saya ingin membagikan solusi saya yang merupakan variasi dari solusi Imagine Breaker di atas. Saya mencoba menggunakan solusinya, karena solusinya tampaknya paling sederhana dan mudah bagi saya. Tapi seperti kata yang lain, itu tidak bekerja untuk beberapa browser, jadi saya menaruh beberapa variasi di atasnya dengan menggunakan jquery.
Semoga ini bisa membantu seseorang di luar sana.
sumber
window.location.href = url
. Tautan yang Anda buat tidak digunakan untuk apa pun.Catatan: Tidak didukung di semua browser.
Saya sedang mencari cara untuk mengunduh file menggunakan jquery tanpa harus mengatur url file di atribut href dari awal.
sumber
Saya menggunakan solusi @ rakaloof tanpa JQuery (karena Anda tidak membutuhkannya di sini ). Terima kasih atas idenya! Berikut ini adalah solusi berbasis form vanillaJS:
sumber