La balise HTML5 `<a>` peut utiliser l'attribut `download` pour définir le téléchargement d'une ressource, mais elle doit être de même origine. Si le navigateur peut l'analyser, il l'ouvrira directement.
Dans ce cas, nous pouvons utiliser la bibliothèque tierce download pour implémenter une fonctionnalité de téléchargement plus complète.
Ressources liées à download.js :
- Adresse GitHub :https://github.com/rndme/download
- Bibliothèque CDN :https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/downloadjs/1.4.8/download.min.js
- Installation NPM :npm install downloadjs
La bibliothèque download.js fournit une fonction `download()` pour télécharger des fichiers.
Le contenu à télécharger peut être une URL, une chaîne, un Blob ou un tableau de données typé, ou une dataURL qui représente les données du fichier sous forme de chaîne encodée en base64 ou URL.
Quel que soit le format d'entrée, `download()` utilise le nom de fichier et les informations MIME spécifiés pour enregistrer le fichier de la même manière qu'un serveur utilisant l'en-tête HTTP Content-Disposition.
download(data, strFileName, strMimeType);
- data - Le contenu des données à télécharger, peut être un Blob, un File, une String ou une dataURL.
- strFileName - Le nom du fichier à créer.
- strMimeType - Le type de contenu MIME du fichier à télécharger.
Exemples
Texte
Enregistrer la chaîne dans un fichier dlText.txt et le télécharger :
download("hello world", "dlText.txt", "text/plain");
Exemple de texte dataURL :
download("data:text/plain,hello%20world", "dlDataUrlText.txt", "text/plain");
Exemple de texte blob :
download(new Blob(["hello world"]), "dlTextBlob.txt", "text/plain");
Exemple d'url :
download("/robots.txt");
Exemple de tableau de texte UInt8 :
var str= "hello world", arr= new Uint8Array(str.length);
str.split("").forEach(function(a,b){
arr[b]=a.charCodeAt();
});
download( arr, "textUInt8Array.txt", "text/plain" );
HTML
Exemple de chaîne html :download(document.documentElement.outerHTML, "dlHTML.html", "text/html");
Exemple de Blob html :
download(new Blob(["hello world".bold()]), "dlHtmlBlob.html", "text/html");
Exemple de rappel ajax :
$.ajax({
url: "/download.html",
success: download.bind(true, "text/html", "dlAjaxCallback.html")
});
Fichiers binaires
URL de l'image :
download("/diff6.png");
Télécharger une image de manière asynchrone :
var x=new XMLHttpRequest();
x.open( "GET", "/diff6.png" , true);
x.responseType="blob";
x.onload= function(e){download(e.target.response, "awesomesauce.png", "image/png");};
x.send();