recherche

Maison  >  Article  >  interface Web  >  Comment déclencher le téléchargement du fichier en cliquant sur le bouton HTML ou JavaScript ?

Comment déclencher le téléchargement du fichier en cliquant sur le bouton HTML ou JavaScript ?

王林
王林avant
2023-09-12 12:49:021148parcourir

Comment déclencher le téléchargement du fichier en cliquant sur le bouton HTML ou JavaScript ?

Aujourd'hui, de nombreuses applications permettent aux utilisateurs de télécharger et télécharger des fichiers. Par exemple, les outils de détection de plagiat permettent aux utilisateurs de télécharger un fichier de document contenant du texte. Il vérifie ensuite le plagiat et génère un rapport que les utilisateurs peuvent télécharger.

Tout le monde sait utiliser un fichier de type entrée pour créer un bouton de téléchargement de fichier, mais peu de développeurs savent utiliser JavaScript/JQuery pour créer un bouton de téléchargement de fichier.

Ce didacticiel enseignera différentes manières de déclencher le téléchargement d'un fichier lorsque vous cliquez sur un bouton HTML ou JavaScript.

Utilisez la balise et l'attribut de téléchargement du HTML pour déclencher le téléchargement du fichier lorsque vous cliquez sur le bouton

Chaque fois que nous ajoutons l'attribut de téléchargement à la balise , nous pouvons utiliser la balise Nous devons transmettre l'URL du fichier comme valeur de l'attribut href pour permettre à l'utilisateur de télécharger un fichier spécifique lorsqu'il clique sur le lien.

Grammaire

Les utilisateurs peuvent créer un bouton de téléchargement de fichier à l'aide de la balise selon la syntaxe ci-dessous. 

<a href = "file_path" download = "file_name">

Dans la syntaxe ci-dessus, nous avons ajouté l'attribut download et le nom du fichier comme valeur de l'attribut download.

Paramètres

  • file_path – C'est le chemin d'accès au fichier que nous souhaitons que l'utilisateur télécharge.

Exemple 1

se traduit par :

Exemple 1

Dans l'exemple ci-dessous, nous transmettons l'URL de l'image comme valeur de l'attribut href de la balise HTML . Nous utilisons le bouton de téléchargement comme texte d'ancrage pour la balise

Chaque fois que l'utilisateur clique sur le bouton, il peut voir que cela déclenche le téléchargement du fichier. 

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

Utilisez la méthode window.open()

La méthode window.open() ouvre une URL dans un nouvel onglet. Nous pouvons passer l'URL en paramètre de la méthode open().

Si la méthode open() ne parvient pas à ouvrir l'URL, le téléchargement du fichier sera déclenché.

Grammaire

Les utilisateurs peuvent utiliser la méthode window.open() selon la syntaxe suivante pour créer un bouton de téléchargement de fichier. 

window.open("file_url")

Dans la syntaxe ci-dessus, nous transmettons l'URL du fichier en paramètre de la méthode window.open().

Exemple 2

Dans l'exemple ci-dessous, chaque fois que l'utilisateur clique sur le bouton, cela déclenche la fonction downloadFile(). Dans la fonction downloadFile(), la méthode window.open() déclenche le téléchargement du fichier. 

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

Obtenez l'entrée de l'utilisateur, créez un fichier en utilisant cette entrée et autorisez l'utilisateur à télécharger le fichier

Cette méthode permettra à l'utilisateur d'écrire du texte dans la zone de saisie. Après cela, en utilisant le texte saisi, nous créerons un nouveau fichier et permettra à l'utilisateur de télécharger le fichier.

Grammaire

Les utilisateurs peuvent créer un fichier avec du texte personnalisé suivant la syntaxe suivante et permettre aux utilisateurs de le télécharger. 

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

Dans la syntaxe ci-dessus, nous avons codé le texte pour l'ajouter au fichier et l'avons créé à l'aide des balises

Algorithme

  • Étape 1 - Obtenez le texte en accédant à l'entrée HTML.

  • Étape 2 - Créez une balise HTML personnalisée à l'aide de la méthode JavaScript createElement().

  • Étape 3 - Utilisez la méthode setAttribute() pour définir l'attribut href pour l'élément HTML Hidden_a. Utilisez le texte codé comme valeur de l'attribut href.

  • Étape 4 - Utilisez à nouveau la méthode setAttribute() et définissez l'attribut de téléchargement sur la valeur du nom de fichier de téléchargement de l'élément caché Hidden_a.

  • Étape 5 - Ajoutez l'élément Hidden_a au corps.

  • Étape 6 - Utilisez la méthode click() pour déclencher un clic sur l'élément Hidden_a. Lorsqu'il appelle la méthode click(), il démarre le téléchargement.

  • Étape 7 - Supprimez l'élément Hidden_a du corps du document à l'aide de la méthode RemoveChild().

La traduction chinoise de

Exemple 3

est :

Exemple 3

Dans l'exemple ci-dessous, les utilisateurs peuvent saisir n'importe quel texte personnalisé dans le champ de saisie et cliquer sur le bouton pour déclencher le téléchargement d'un fichier à l'aide de JavaScript. Nous avons implémenté l'algorithme ci-dessus pour déclencher un téléchargement de fichier.

. 
<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>

Créez un bouton de téléchargement de fichier à l'aide de la bibliothèque axios

La bibliothèque axios nous permet d'obtenir des données à partir de n'importe quelle URL. Nous obtiendrons donc les données de n'importe quelle URL ou chemin de fichier, puis définirons ces données comme valeur de l'attribut href de la balise . De plus, nous ajouterons l'attribut download à la balise à l'aide de la méthode setAttribute() et déclencherons le téléchargement du fichier à l'aide de la méthode click().

Grammaire

Les utilisateurs peuvent utiliser axios et JavaScript pour déclencher le téléchargement de fichiers selon la syntaxe suivante. 

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

Dans la syntaxe ci-dessus, la méthode axios.get() nous permet d'obtenir les données du file_path stocké dans la variable results. Après cela, nous utilisons le nouveau constructeur Blob() pour convertir les données en un objet Blob.

La traduction chinoise de

Exemple 4

est :

Exemple 4

Dans l'exemple ci-dessous, nous utilisons axios pour obtenir les données de l'URL, les convertir en objet Blob et les définir comme valeur de l'attribut href.

Ensuite, nous avons cliqué sur l'élément via JavaScript pour déclencher le téléchargement du fichier. 

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript jquery html 构造函数 using 值传递 对象 href input 算法
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment améliorer les performances de JavaScript ?Article suivant：Comment améliorer les performances de JavaScript ?

Articles Liés

Voir plus