Télécharger un fichier à l'aide de JavaScript
-
Utilisez l’attribut
downloaden HTML pour télécharger des fichiers - Utilisation d’une fonction écrite personnalisée pour créer et télécharger des fichiers texte en JavaScript
-
Utilisez la bibliothèque
Axiospour télécharger des fichiers
Dans cet article, nous allons apprendre à télécharger des fichiers à l’aide de JavaScript. Les fichiers de téléchargement automatique nous aident à récupérer les fichiers directement à partir de l’URL avec une fonction JavaScript sans contacter aucun serveur. Nous y parviendrons en utilisant nos fonctions écrites personnalisées et en utilisant l’attribut de téléchargement de HTML 5.
Utilisez l’attribut download en HTML pour télécharger des fichiers
L’attribut download en HTML 5 permet de télécharger des fichiers lorsque l’utilisateur clique sur l’hyperlien. Il est utilisé avec des balises d’ancrage - <a> et <area>. Nous devons définir l’attribut href en spécifiant la source du fichier. La valeur de l’attribut download détermine le nom du fichier téléchargé. Si cette valeur est supprimée, le nom de fichier téléchargé sera le même que le nom de fichier d’origine.
<!DOCTYPE html>
<html>
<head>
<title>How to Download files Using JavaScript </title>
</head>
<body>
<a href="apple.png" download="apple">
<button type="button">Download</button>
</a>
</body>
</html>
Dans le code ci-dessus, on télécharge une image apple.png en utilisant l’attribut download. Nous créons d’abord la balise d’ancrage contenant l’adresse de l’image et y ajoutons l’attribut download. Ensuite, nous avons également créé un bouton de téléchargement pour faciliter le téléchargement des fichiers.
Utilisation d’une fonction écrite personnalisée pour créer et télécharger des fichiers texte en JavaScript
Cette approche créera des données texte à la volée, puis utilisera JavaScript pour créer un fichier texte, puis le télécharger.
Télécharger l’algorithme
-
Créez une zone de texte pour saisir les données de texte.
-
Créez une balise d’ancrage
<a>en utilisant la propriétécreateElementet attribuez-lui les attributsdownloadethref. -
Utilisez
encodeURIComponentpour encoder le texte et l’ajouter à l’URI en tant que composant. Cela nous aidera à remplacer certains caractères spéciaux par une combinaison de séquences d’échappement. -
Réglez le type de date sur
text/plainet le codage surUTF-8en utilisant le paramètredata:text/plain; charset = utf-8comme valeur d’attribut dehref. -
Ajoutez cet élément créé au corps du document (page HTML).
-
Utilisez
element.click()pour simuler un clic de souris. -
Supprime l’élément du corps du document (page HTML).
Attachez un écouteur d’événement à la recherche d’un clic sur un bouton de téléchargement. Appelez la fonction de téléchargement avec le texte de la zone de texte et le nom de fichier du fichier texte comme paramètres.
<!DOCTYPE html>
<html>
<head>
<title>
How to Download files Using JavaScript
</title>
</head>
<body>
<textarea id="text">DelftStack</textarea>
<br />
<input type="button" id="btn" value="Download" />
<script>
function download(filename, textInput) {
var element = document.createElement('a');
element.setAttribute('href','data:text/plain;charset=utf-8, ' + encodeURIComponent(textInput));
element.setAttribute('download', filename);
document.body.appendChild(element);
element.click();
//document.body.removeChild(element);
}
document.getElementById("btn")
.addEventListener("click", function () {
var text = document.getElementById("text").value;
var filename = "output.txt";
download(filename, text);
}, false);
</script>
</body>
</html>
Utilisez la bibliothèque Axios pour télécharger des fichiers
Dans cette approche, nous utiliserons la bibliothèque Axios pour télécharger des fichiers. Avant de procéder aux détails de l’approche, comprenons ce qu’est Blob, le type de données utilisé pour télécharger des fichiers avec Axios.
Blob
Blob signifie Binary Large Object et est un type de données qui peut stocker des données binaires. Il représente des données telles que des programmes, des extraits de code, des objets multimédias et d’autres éléments qui ne prennent pas en charge le format natif JavaScript.
Telecharger des fichiers
-
Créer une requête Axios
getavec l’URL comme source du fichier et leresponseTypecommeblob. -
Résolvez la promesse renvoyée par la requête Axios en effectuant les étapes suivantes:
- Créez un DOMString qui contient l’URL représentant l’objet Blob.
- Créez une balise d’ancrage
<a>à l’aide de la propriétécreateElementet attribuez-lui les attributsdownloadethref. - Définissez
hrefcomme URL créée lors de la première étape et l’attributdownloadcomme nom du fichier téléchargé. - Attachez ce lien au document et simulez un clic en utilisant la méthode
.click(). - Supprimez ce lien du document.
<!DOCTYPE html>
<html>
<head>
<title>How to download files using JavaScript</title>
</head>
<body>
<button onclick="download()">
Download Image
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js">
</script>
<script>
function download() {
axios({
url: 'https://source.unsplash.com/random/500x500',
method: 'GET',
responseType: 'blob'
})
.then((response) => {
const url = window.URL
.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'image.jpg');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
}
</script>
</body>
</html>
Ici, on récupère des images aléatoires d’un site, on utilise Axios pour demander ces images sous forme de blobs, puis on les télécharge en utilisant l’attribut download de la balise d’ancrage. Cette méthode n’est pas limitée au texte brut saisi par l’utilisateur comme la méthode précédente. Nous pouvons demander n’importe quel type de données à une API, puis utiliser cette approche pour enregistrer des données à l’intérieur de notre ordinateur.
Tous les principaux navigateurs supportent toutes les méthodes ci-dessus sauf la méthode utilisant la bibliothèque Axios. Internet Explorer ne prend toujours pas en charge les promesses natives ES6 et Axios en dépend fortement.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn