Utilisez JS pour créer des fichiers de téléchargement dans les compétences browser_javascript

Mais limité par les navigateurs, dans de nombreux cas, nous ne pouvons donner qu'un lien et laisser les utilisateurs cliquer pour ouvrir -> Enregistrer sous. Tel que le lien suivant :

Copier le code Le code est le suivant :

file.js

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

<.>Copier le code Le code est le suivant :

DataURI L'explication peut être déplacée ici, je ne l'expliquerai pas ici.
Il existe désormais une base légale pour télécharger du contenu généré par js. Encapsulé dans une méthode comme suit :

Copier le code Le code est le suivant :

fonction downloadFile (aLink, fileName, contenu){
aLink.download = fileName;

aLink.href = "data:text/plain," content;
}

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 :

Les types de fichiers à télécharger sont restreints. 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 du 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 des images. DataURI est utilisé ici pour afficher des images. télécharger des fichiers. 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.

Maintenant, il nous suffit de créer une ObjectURL avec du contenu et de 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 dans l'interface utilisateur, puis le déclencher automatiquement pour réaliser un téléchargement automatique.

Regardons maintenant le code final :

Copiez le code Le code est le suivant :

fonction downloadFile (fileName, content){
var aLink = document.createElement('a');

var blob = new Blob([content]);
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 ses commentaires
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 des 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.