Avec le développement de la technologie frontale, de plus en plus de scénarios commerciaux nécessitent une interface frontale pour gérer les téléchargements de fichiers. Parmi les nombreuses méthodes, le téléchargement via l'attribut download de la balise <a> est une méthode courante et relativement simple.
La balise <a> conventionnelle implémente le saut de lien via href. Si vous souhaitez uniquement télécharger le fichier au lieu de passer à l'aperçu, le meilleur moyen est d'ajouter l'attribut download dans la balise <a> , et l'opération de téléchargement peut être facilement réalisée. .
download est un nouvel attribut de la balise <a> en HTML5. Cet attribut forcera le déclenchement de l'opération de téléchargement, demandant au navigateur de télécharger l'URL au lieu d'y accéder, et invitera l'utilisateur à l'enregistrer en tant que fichier local, Par exemple:
<a href=result.png download>télécharger</a>
Si l'attribut download est manquant, cliquer sur télécharger passera directement à l'image d'aperçu. Lorsque download est ajouté, le téléchargement de l'image sera déclenché.
La compatibilité actuelle de l'attribut download est celle indiquée dans caniuse :
On peut constater que la plupart des navigateurs grand public prennent essentiellement en charge l'attribut download et que les performances d'IE sont plus impressionnantes que jamais. Actuellement, de nombreux systèmes Windows utilisent encore IE, ce qui est également un élément que de nombreuses entreprises doivent prendre en compte. Ce problème de compatibilité limite l'application plus large du download .
Face à certains scénarios commerciaux de téléchargement de contenu dynamique, c'est-à-dire que les adresses de ressources telles que les images ne sont pas fixes (comme les images générées par certains outils de dessin en ligne), seule l'utilisation de HTML ne peut pas répondre aux besoins. Afin de satisfaire différents téléchargements d'URL, une méthode de déclenchement dynamique des téléchargements d'URL peut être implémentée via JS.
function download(href, filename='') { const a = document.createElement('a') a.download = filename a.href = href document.body.appendChild(a) a.click() a.remove() } Il convient de noter que appendChild et remove effectuées sur le <a> créé dans le code sont principalement destinées à la compatibilité avec le navigateur FireFox. Lors de l'appel de cette méthode sous le navigateur FireFox, si vous n'ajoutez pas la balise <a> créée à. le corps, cliquez sur Le lien ne fera rien et déclenchera un téléchargement, ce qui n'est pas le cas dans Chrome.
La méthode ci-dessus peut réaliser le téléchargement de ressources de même origine. Mais dans de nombreux scénarios, les ressources inter-domaines doivent également être traitées. Malheureusement, l'attribut download ne s'applique actuellement qu'aux URL de même origine . Autrement dit, si l'adresse de la ressource à télécharger est interdomaine, l'attribut download ne sera pas valide et cliquer sur le lien se transformera en un aperçu de la navigation.
Test : Cliquez pour télécharger, le résultat n'est qu'un aperçu et l'image ne peut pas être téléchargée.
Remarque : Chrome 65 prenait auparavant en charge l'attribut download pour déclencher les téléchargements de fichiers entre domaines. Plus tard, il suivait strictement la politique de même origine et ne pouvait plus déclencher le téléchargement de ressources entre domaines via download . FireFox n'a pas pris en charge l'attribut download des ressources inter-domaines.
L'attribut download peut non seulement déclencher des téléchargements, mais également spécifier le nom du fichier téléchargé :
<a href=test.png download=joker.png>Télécharger</a>
Si le suffixe du fichier téléchargé est cohérent avec le fichier source, vous pouvez définir le nom de fichier par défaut :
<a href=test.png download=joker>Télécharger</a>
L'auteur a rencontré un problème. Le téléchargement des ressources inter-domaines a été déclenché via la balise <a> . Le code était fondamentalement le même que la méthode de téléchargement mentionnée ci-dessus, sauf que l'endroit où download était défini était légèrement différent :
a.setAttribute (télécharger, vrai)
En conséquence, la situation suivante s'est produite dans l'ancienne version du navigateur Chrome.
Le nom du fichier téléchargé devient true . Évidemment, le navigateur lit la valeur de l'attribut download comme nom de fichier.
Après analyse, les problèmes ci-dessus sont principalement dus à :
1. Tout d'abord, download ne doit pas être défini sur true .La valeur de l'attribut download est différente de celle disabled est directement lié au nom du fichier. Et pour cette méthode de téléchargement réactive front-end et back-end, l’attribut download n’est pas nécessaire.
2. Les versions antérieures de Chrome prenaient non seulement en charge l'attribut download des ressources inter-domaines, mais pouvaient également réinitialiser les noms de fichiers des ressources inter-domaines via download , de sorte que la situation ci-dessus s'est produite.
Le scénario commercial dans lequel le front-end et le back-end coopèrent pour terminer le téléchargement du fichier est généralement implémenté par le back-end définissant Content-Disposition dans l'en-tête de réponse.
Dans le scénario HTTP, le premier paramètre de Content-Disposition est soit en ligne (la valeur par défaut, indiquant que le corps du message dans la réponse sera affiché dans le cadre de la page ou de la page entière), soit en pièce jointe (ce qui signifie que le corps du message doit être téléchargé en local ; la plupart des navigateurs présenteront une boîte de dialogue Enregistrer sous, préremplissant la valeur du nom de fichier avec le nom du fichier téléchargé).
Si Content-Disposition est défini dans l'en-tête de réponse et que le frontal ajoute également l'attribut download à la balise <a> du lien correspondant, alors les règles de dénomination à ce stade sont :
Si l'attribut Content-Disposition dans l'en-tête HTTP reçoit un nom de fichier différent de cet attribut, l'attribut d'en-tête HTTP est prioritaire sur cet attribut.
Après les tests, il a été constaté que lorsque Content-Disposition dans l'en-tête HTTP n'est pas vide :
Dans le navigateur Chrome, que le premier paramètre de Content-Disposition dans l'en-tête HTTP soit défini sur attachment ou inline , download ne peut pas réinitialiser le nom du fichier tant que le nom du fichier est défini. Au contraire, lorsque le nom de fichier est vide, la valeur de l'attribut download sera définie sur le nom du fichier. Dans le navigateur FireFox, le navigateur lira uniquement la valeur du nom de fichier de Content-Disposition . Si le nom de fichier est vide, le nom du fichier source sera pris. Pour le moment, download ne peut de toute façon pas réinitialiser le nom du fichier.
Pour résumer : si les informations Content-Disposition ne sont pas définies dans l'en-tête de réponse (par exemple, l'URL de même origine qui localise généralement directement la ressource), l'attribut download peut réinitialiser le nom du fichier. Si le backend a défini le nom de fichier dans le champ Content-Disposition , la valeur du nom de fichier prévaudra.
Que dois-je faire si je souhaite quand même réinitialiser le nom du fichier alors que le nom du fichier a été défini sur le backend ?
Objet blob : URL Il y a également une introduction à l'attribut download :
Bien que l'URL HTTP doive appartenir à la même origine, vous pouvez utiliser blob: URL et data: URL pour permettre aux utilisateurs de télécharger plus facilement du contenu généré à l'aide de JavaScript (comme des photos créées à l'aide d'une application Web de dessin en ligne).
Blob (Binary Large Object) est un grand objet binaire. Certaines bases de données utilisent Blob pour représenter le type de champ qui stocke les fichiers binaires. L'interface File est également basée sur Blob, héritant des fonctions de Blob et l'étendant pour prendre en charge les fichiers sur le système utilisateur. Les objets Blob sont créés à l'aide du constructeur Blob :
Blob(blobParts[, options])
var debug = {bonjour : monde};var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'}); Si vous avez besoin de télécharger du texte simple ou des fichiers de chaîne JS, vous pouvez convertir les informations textuelles en un flux binaire blob, générer une URL Blob et utiliser l'attribut download pour terminer le téléchargement. Le code est le suivant.
const downloadText = (texte, nom de fichier = '') { const a = document.createElement('a') a.download = nom de fichier const blob = new Blob([text], {type : 'text/plain'}) // text fait référence au contenu du texte ou de la chaîne qui doit être téléchargé a.href = window.URL.createObjectURL(blob) // Une chaîne d'URL similaire à blob:http://localhost:8080/d3958f5c-0777-0845-9dcf-2cb28783acaf sera générée document.body.appendChild(a) a.click() a.remove()}Quelle est la différence entre cette URL Blob et l’URL HTTP courante ?
Blob URL/Object URL est un pseudo-protocole qui permet d'utiliser des objets Blob et File comme sources d'URL telles que des images et des liens de téléchargement de données binaires.
Le navigateur crée une référence spéciale à l'objet Blob ou File en interne via URL.createObjectURL() . L'URL Blob générée ne peut être utilisée que dans une seule instance du navigateur et dans la même session, et cet objet URL sera utilisé lorsque le navigateur crée une référence spéciale à l'objet Blob ou File en interne via URL.createObjectURL() . la page se ferme. Libérée par le navigateur.
Par conséquent, l’URL du Blob ne peut pas pointer vers une ressource serveur et vous ne pouvez pas l’ouvrir dans d’autres pages. Dans le même temps, en raison des différences dans les formats d’encodage, les URL Blob occupent moins de ressources spatiales et fonctionnent mieux que les URL de données.
Les blobs fournissent une fonctionnalité très utile pour le développement Web : la création d’URL de blob. Encapsulez les données binaires dans un objet Blob, puis utilisez URL.createObjectURL() pour générer une URL Blob. Étant donné que l'URL Blob elle-même est une URL de même origine, vous pouvez utiliser cette URL avec download pour résoudre le problème de téléchargement et de dénomination. ressources inter-domaines.
Blob et Fetch peuvent résoudre le problème de dénomination inter-domaines et de fichiers : utilisez fetch pour obtenir des ressources inter-domaines, renvoyez un objet blob et générez une URL Blob, et utilisez download de la balise <a> pour déclencher le téléchargement. Le code est le suivant :
function download(href, filename = '') { const a = document.createElement('a') a.download = filename a.href = href document.body.appendChild(a) a.click() a.remove() }function downloadFile(url, filename='') { fetch(url, { headers : new Headers({ Origin : location.origin, }), mode : 'cors', }) .then(res => res.blob()) .then(blob => { const blobUrl = window.URL.createObjectURL(blob) download(blobUrl, filename) window.URL.revokeObjectURL(blobUrl) })}À ce stade, cliquez à nouveau sur Télécharger et les images inter-domaines peuvent être téléchargées normalement dans la zone locale.
Il convient de noter que le serveur sur lequel se trouvent les ressources inter-domaines doit être configuré avec les informations Access-Control-Allow-Origin , sinon vous obtiendrez une erreur inter-domaine en majuscule. Exemple de configuration d'en-tête :
//Autoriser n'importe quel nom de domaine à accéder à l'en-tête('Access-Control-Allow-Origin: *'); //Spécifiez le nom de domaine pour accéder à l'en-tête('Access-Control-Allow-Origin: https://h5.ele.me ');Cette méthode présente encore quelques inconvénients. Par exemple, le navigateur limitera la taille des données Blob à 500 Mo maximum, et cela sera également insuffisant en termes de performances.
Résumer Actuellement, il existe de nombreuses méthodes de téléchargement sur le front-end, et download est l'une des plus simples. Cependant, un examen attentif de certaines de ces fonctionnalités peut également révéler de nombreuses informations utiles. download est étroitement lié aux fonctionnalités du navigateur. À l'heure actuelle, la compatibilité de cet attribut constitue également un gros problème. Cependant, même les responsables de Microsoft implorent les utilisateurs de ne plus utiliser IE. Je pense que le problème de compatibilité du download continuera à être amélioré. l'avenir, et les perspectives d'application deviendront de plus en plus larges.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.