Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Mencetuskan Muat Turun Fail Menggunakan Butang HTML atau JavaScript?

Bagaimana untuk Mencetuskan Muat Turun Fail Menggunakan Butang HTML atau JavaScript?

Linda Hamilton
Linda Hamiltonasal
2024-12-03 05:37:09343semak imbas

How to Trigger File Downloads Using HTML Buttons or JavaScript?

Mencetuskan Muat Turun Fail daripada Butang HTML atau JavaScript

Dalam pembangunan web, selalunya perlu menyediakan pengguna dengan keupayaan untuk memuat turun fail. Manakala HTML tradisional tag anchor dengan atribut href sering digunakan untuk tujuan ini, anda mungkin menghadapi situasi di mana anda ingin mencetuskan muat turun menggunakan butang atau JavaScript.

Kaedah 1: Menggunakan Atribut Muat Turun HTML5

Untuk mencetuskan muat turun fail menggunakan butang HTML, anda boleh menggunakan atribut muat turun HTML5. Atribut ini menentukan nama fail yang akan digunakan semasa menyimpan fail dan berfungsi dengan kedua-dua dan elemen.

<button type="button" download="file.doc">Download!</button>

Kaedah 2: Mencetuskan Muat Turun melalui JavaScript

Anda juga boleh mencetuskan muat turun fail secara pemprograman menggunakan JavaScript. Walau bagaimanapun, kaedah ini memerlukan pendekatan yang sedikit berbeza. Daripada menggunakan atribut href, anda boleh menetapkan sifat location.href objek tetingkap ke URL fail dan menambah nama fail pada atribut muat turun elemen a.

$("#fileRequest").click(function() {
  location.href = "file.doc";
  $("a").attr("download", "proposed_file_name");
});

Pertimbangan Tambahan

  • Ingat bahawa laluan fail mestilah pada asal yang sama dengan halaman (iaitu, berkongsi perkara yang sama domain, subdomain, protokol dan port).
  • Jika nama fail tidak dinyatakan, nama fail lalai bagi fail yang sedang dimuat turun akan digunakan.
  • Atribut muat turun disokong oleh kebanyakan penyemak imbas moden , walaupun tingkah lakunya mungkin berbeza sedikit.

Atas ialah kandungan terperinci Bagaimana untuk Mencetuskan Muat Turun Fail Menggunakan Butang HTML atau JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn