Kini, banyak aplikasi membenarkan pengguna memuat naik dan memuat turun fail. Contohnya, alat pengesanan plagiarisme membenarkan pengguna memuat naik fail dokumen yang mengandungi beberapa teks. Ia kemudian menyemak plagiarisme dan menghasilkan laporan yang boleh dimuat turun oleh pengguna.
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.
Setiap kali kami menambah atribut muat turun pada teg Kami perlu menghantar URL fail sebagai nilai atribut href untuk membolehkan pengguna memuat turun fail tertentu apabila mereka mengklik pada pautan.
Pengguna boleh membuat butang muat turun fail menggunakan teg
<a href = "file_path" download = "file_name">
Dalam sintaks di atas, kami menambahkan atribut muat turun dan nama fail sebagai nilai atribut muat turun.
file_path – Ini ialah laluan ke fail yang kami mahu pengguna muat turun.
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>
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.
Pengguna boleh menggunakan kaedah window.open() mengikut sintaks berikut untuk mencipta butang muat turun fail.
window.open("file_url")
Dalam sintaks di atas, kami menghantar URL fail sebagai parameter kaedah window.open().
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>
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.
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();
Dalam sintaks di atas, kami mengekodkan teks untuk menambahkannya pada fail dan menciptanya menggunakan tag
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().
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>
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().
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]));
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 bagiDalam 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>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)
