Semua orang tahu menggunakan fail jenis input untuk mencipta butang muat naik fail, tetapi beberapa pembangun tahu cara menggunakan JavaScript/JQuery untuk mencipta butang muat turun fail.
Tutorial ini akan mengajar pelbagai cara untuk mencetuskan muat turun fail apabila butang HTML atau JavaScript diklik.
Dalam sintaks di atas, kami menambahkan atribut muat turun dan nama fail sebagai nilai atribut muat turun.
Dalam contoh di bawah, kami menghantar URL imej sebagai nilai atribut href bagi teg HTML
Setiap kali pengguna mengklik butang, mereka dapat melihat ia mencetuskan muat turun fail.
<html>
<body>
<h3> Using the <i> download attribute of <a> tag </i> to create file download button using JavaScript. </h3>
<p> Click the below button to download the image file </p>
<a href = "https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg"
Download = "test_image">
<button type = "button"> Download </button>
</a>
</body>
</html>
Salin selepas log masuk
Gunakan kaedah window.open()
Kaedah window.open() membuka URL dalam tab baharu. Kita boleh menghantar URL sebagai parameter kaedah open().
Jika kaedah open() tidak dapat membuka URL, muat turun fail akan dicetuskan.
Tatabahasa
Pengguna boleh menggunakan kaedah window.open() mengikut sintaks berikut untuk mencipta butang muat turun fail.
window.open("file_url")
Salin selepas log masuk
Dalam sintaks di atas, kami menghantar URL fail sebagai parameter kaedah window.open().
Contoh 2
Dalam contoh di bawah, apabila pengguna mengklik pada butang, ia mencetuskan fungsi muat turunFail(). Dalam fungsi muat turunFile(), kaedah window.open() mencetuskan muat turun fail.
<html>
<body>
<h3> Using the <i> window.open() method </i> to create a file download button using JavaScript. </h3>
<p> Click the below button to download the image file </p>
<button type = "button" onclick = "downloadFile()"> Download </button>
</body>
<script>
function downloadFile() {
window.open("https://images.pexels.com/photos/268533/pexels-photo-268533.jpeg?cs=srgb&dl=pexels-pixabay-268533.jpg&fm=jpg")
}
</script>
</html>
Salin selepas log masuk
Dapatkan input pengguna, buat fail menggunakan input itu dan benarkan pengguna memuat turun fail
Kaedah ini akan membolehkan pengguna menulis teks dalam kotak input. Selepas itu, menggunakan teks yang dimasukkan, kami akan mencipta fail baharu dan membenarkan pengguna memuat turun fail tersebut.
Tatabahasa
Pengguna boleh mencipta fail dengan teks tersuai mengikut sintaks berikut dan membenarkan pengguna memuat turunnya.
var hidden_a = document.createElement('a');
hidden_a.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(texts));
hidden_a.setAttribute('download', "text_file");
document.body.appendChild(hidden_a); hidden_a.click();
Salin selepas log masuk
Dalam sintaks di atas, kami mengekodkan teks untuk menambahkannya pada fail dan menciptanya menggunakan tag
Algoritma
Langkah 1 - Dapatkan teks dengan mengakses input HTML.
Langkah 2 − Cipta teg HTML tersuai menggunakan kaedah JavaScript createElement().
Langkah 3 − Gunakan kaedah setAttribute() untuk menetapkan atribut href untuk elemen HTML hidden_a. Gunakan teks yang dikodkan sebagai nilai atribut href.
Langkah 4 − Gunakan kaedah setAttribute() sekali lagi dan tetapkan atribut muat turun kepada nilai nama fail muat turun elemen tersembunyi hidden_a.
Langkah 5 - Tambahkan elemen hidden_a pada badan.
Langkah 6 - Gunakan kaedah klik() untuk mencetuskan klik pada elemen hidden_a. Apabila ia memanggil kaedah klik(), ia mula memuat turun.
Langkah 7 - Alih keluar elemen hidden_a daripada badan dokumen menggunakan kaedah removeChild().
Terjemahan bahasa Cina bagi Contoh 3
ialah: Contoh 3
Dalam contoh di bawah, pengguna boleh memasukkan sebarang teks tersuai dalam medan input dan klik butang untuk mencetuskan muat turun fail menggunakan JavaScript Kami telah melaksanakan algoritma di atas untuk mencetuskan muat turun fail.
<html>
<body>
<h3> Create the file from the custom text and allow users to download that file </h3>
<p> Click the below button to download the file with custom text. </p>
<input type = "text" id = "file_text" value = "Entetr some text here.">
<button type = "button" onclick = "startDownload()"> Download </button>
</body>
<script>
function startDownload() {
// access the text from the input field
let user_input = document.getElementById('file_text');
let texts = user_input.value;
// Create dummy <a> element using JavaScript.
var hidden_a = document.createElement('a');
// add texts as a href of <a> element after encoding.
hidden_a.setAttribute('href', 'data:text/plain;charset=utf-8, '+ encodeURIComponent(texts));
// also set the value of the download attribute
hidden_a.setAttribute('download', "text_file");
document.body.appendChild(hidden_a);
// click the link element
hidden_a.click();
document.body.removeChild(hidden_a);
}
</script>
</html>
Salin selepas log masuk
Buat butang muat turun fail menggunakan perpustakaan axios
pustaka axios membolehkan kami mendapatkan data daripada mana-mana URL. Jadi kami akan mendapatkan data daripada mana-mana URL atau laluan fail dan kemudian menetapkan data tersebut sebagai nilai atribut href bagi teg Selain itu, kami akan menambah atribut muat turun pada teg menggunakan kaedah setAttribute() dan mencetuskan muat turun fail menggunakan kaedah klik().
Tatabahasa
Pengguna boleh menggunakan axios dan JavaScript untuk mencetuskan muat turun fail mengikut sintaks berikut.
let results = await axios({
url: 'file_path',
method: 'GET',
responseType: 'blob'
})
// use results as a value of href attribute of <a> tag to download file
hidden_a.href = window.URL.createObjectURL(new Blob([results.data]));
Salin selepas log masuk
Dalam sintaks di atas, kaedah axios.get() membolehkan kami mendapatkan data daripada fail_path yang disimpan dalam pembolehubah hasil. Selepas itu, kami menggunakan pembina Blob() baharu untuk menukar data menjadi objek Blob.
Terjemahan bahasa Cina bagi Contoh 4
ialah: Contoh 4
Dalam contoh di bawah, kami menggunakan axios untuk mendapatkan data daripada URL, menukarnya kepada objek Blob dan menetapkannya sebagai nilai atribut href.
Selepas itu, kami mengklik pada elemen melalui JavaScript untuk mencetuskan muat turun fail.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.1/axios.min.js"> </script>
</head>
<body>
<h3> Using the <i> axios library </i> to trigger a download file. </h3>
<p> Click the below button to download the file with custom text. </p>
<button type = "button" onclick = "startDownload()"> Download </button>
</body>
<script>
async function startDownload() {
// get data using axios
let results = await axios({
url: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZ4gbghQxKQ00p3xIvyMBXBgGmChzLSh1VQId1oyhYrgir1bkn812dc1LwOgnajgWd-Yo&usqp=CAU',
method: 'GET',
responseType: 'blob'
})
let hidden_a = document.createElement('a');
hidden_a.href = window.URL.createObjectURL(new Blob([results.data]));
hidden_a.setAttribute('download', 'download_image.jpg');
document.body.appendChild(hidden_a);
hidden_a.click();
}
</script>
</html>Salin selepas log masuk
Atas ialah kandungan terperinci Bagaimana untuk mencetuskan muat turun fail apabila mengklik butang HTML atau JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
