cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mencetuskan muat turun fail apabila mengklik butang HTML atau JavaScript?

Bagaimana untuk mencetuskan muat turun fail apabila mengklik butang HTML atau JavaScript?

王林
王林ke hadapan
2023-09-12 12:49:021148semak imbas

Bagaimana untuk mencetuskan muat turun fail apabila mengklik butang HTML atau JavaScript?

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.

Gunakan teg HTML dan atribut muat turun untuk mencetuskan muat turun fail apabila butang 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.

Tatabahasa

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.

Parameter

  • file_path – Ini ialah laluan ke fail yang kami mahu pengguna muat turun.

Contoh 1

diterjemahkan sebagai:

Contoh 1

Dalam contoh di bawah, kami menghantar URL imej sebagai nilai atribut href bagi teg HTML . Kami menggunakan butang muat turun sebagai teks utama untuk teg

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>

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")

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>

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();

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>

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]));

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>

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!

JavaScript jquery html 构造函数 using 值传递 对象 href input 算法
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk meningkatkan prestasi JavaScript?Artikel seterusnya：Bagaimana untuk meningkatkan prestasi JavaScript?

Artikel berkaitan

Lihat lagi