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.
Les utilisateurs peuvent créer un bouton de téléchargement de fichier à l'aide de la balise selon la syntaxe ci-dessous.
Dans la syntaxe ci-dessus, nous avons ajouté l'attribut download et le nom du fichier comme valeur de l'attribut download.
Dans l'exemple ci-dessous, nous transmettons l'URL de l'image comme valeur de l'attribut href de la balise HTML
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>
Copier après la connexion
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")
Copier après la connexion
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>
Copier après la connexion
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();
Copier après la connexion
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>
Copier après la connexion
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]));
Copier après la connexion
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>Copier après la connexion
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
