Mais limités par les navigateurs, dans de nombreux cas, nous ne pouvons donner qu'un lien et laisser les utilisateurs cliquer pour ouvrir -> Enregistrer sous. Comme le lien suivant :
Copiez le code comme suit :
<a href="file.js">fichier.js</a>
Lorsque l'utilisateur clique sur ce lien, le navigateur s'ouvrira et affichera le contenu du fichier pointé par le lien. Évidemment, cela ne répond pas à nos besoins. HTML5 ajoute un attribut de téléchargement à la balise a. Tant que cet attribut est présent, lorsque le lien est cliqué, le navigateur n'ouvrira pas le fichier pointé par le lien, mais le téléchargera à la place (actuellement pris en charge uniquement par Chrome, Firefox et). Opéra).
Lors du téléchargement, le nom du lien sera utilisé directement comme nom de fichier, mais il peut être modifié. Ajoutez simplement le nom du fichier souhaité à télécharger, tel que : download="not-a-file.js".
Mais cela ne suffit pas. La méthode ci-dessus ne peut être utilisée que lorsque le fichier se trouve sur le serveur. Que se passe-t-il si vous souhaitez que le navigateur télécharge le contenu généré par js côté navigateur ?
En fait, il existe encore un moyen de le faire. Je pense que beaucoup de gens ont entendu parler du mot DataURI. Le plus courant est le src de l'image, tel que :
Copiez le code comme suit :
<img src="data:image/gif;base64,R0lGOXXXXX">
L'explication de DataURI peut être déplacée ici, je ne l'expliquerai pas ici.
Il existe donc désormais une loi à suivre lors du téléchargement de contenu généré par js. Encapsulé dans une méthode comme suit :
Copiez le code comme suit :
fonction downloadFile(aLink, fileName, content){
aLink.download = fileName;
aLink.href = "data:text/plain," + contenu ;
}
Après avoir appelé downloadFile, l'utilisateur clique sur le lien pour déclencher le téléchargement du navigateur.
Cependant, cela ne suffit pas. La méthode ci-dessus présente deux inconvénients, qui entraîneront la perte de nombreuses filles paresseuses :
Il existe des restrictions sur les types de fichiers pouvant être téléchargés. Que dois-je faire si je souhaite télécharger les photos traitées ?
Il faut cliquer à nouveau pour télécharger, ce qui est trop gênant.
Pour résoudre le problème de type de fichier, vous pouvez utiliser la nouvelle API du navigateur (URL.createObjectURL) pour résoudre le problème. URL.createObjectURL est généralement utilisé pour créer le DataURI de l'image afin d'afficher l'image. Ici, il est utilisé pour télécharger le fichier. et laissez le navigateur nous aider à définir le type de fichier.
Le paramètre de URL.createObjectURL est un objet File ou un objet Blob. L'objet File est le fichier sélectionné via input[type=file]. L'objet Blob est un grand objet binaire. Pour une description détaillée, veuillez vous référer ici.
Il ne nous reste plus qu'à créer une ObjectURL avec du contenu et à l'attribuer à aLink pour résoudre le problème de limitation du type de fichier.
Le téléchargement automatique de fichiers est également assez simple. Vous pouvez créer vous-même un événement de clic sur l'interface utilisateur, puis le déclencher automatiquement pour réaliser un téléchargement automatique.
Voyons maintenant le code final :
Copiez le code comme suit :
fonction downloadFile(fileName, content){
var aLink = document.createElement('a');
var blob = nouveau Blob([contenu]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent sans les deux derniers paramètres signalera une erreur sous FF Merci à Barret Lee pour le retour.
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
Maintenant, dès que downloadFile est appelé, le fichier sera automatiquement téléchargé, n'est-ce pas génial ^_^ ?
Remarque : Actuellement (2014-01), Blob et URL.createObjectURL n'ont plus besoin d'ajouter de préfixes privés dans les navigateurs standard, vous pouvez donc les utiliser en toute confiance ~~ Si vous êtes inquiet, vous pouvez vérifier Puis-je utiliser.