Résolvez le problème inter-domaines du téléchargement de fichiers sur le service en utilisant l'attribut de téléchargement de la balise H5 a

La manière la plus simple :

 <a href='url' download=filename.ext>Télécharger le fichier</a>

Si l'URL pointe vers la même ressource source, c'est normal.

Si l'URL pointe vers une ressource tierce, le téléchargement échouera et le comportement sera le même que lorsque le téléchargement n'est pas utilisé : les fichiers pouvant être ouverts par le navigateur seront ouverts directement par le navigateur, et les fichiers qui ne le peuvent pas. être ouvert sera téléchargé directement. Les fichiers ouverts par le navigateur peuvent être téléchargés manuellement.

Solution 1 : emballez le fichier dans un fichier .zip/.rar qui ne peut pas être ouvert par le navigateur et téléchargez-le.

Solution 2 : via le transfert vers le back-end, le back-end demande des ressources tierces et les renvoie au front-end. Le front-end utilise des outils tels que l'économiseur de fichiers pour enregistrer le fichier.

Si la ressource tierce pointée par l'URL est configurée avec CORS, l'attribut de téléchargement n'est pas valide, mais le fichier peut être obtenu et téléchargé localement et le nom du fichier ne peut pas être modifié.

 const downloadRes = async (url, name) => { let réponse = wait fetch(url) // Convertit le contenu en une adresse blob let blob = wait réponse.blob() // Crée un lien téléchargeable caché let objectUrl = window. URL .createObjectURL(blob) let a = document.createElement('a') //Adresse a.href = objectUrl //Modifier le nom du fichier a.download = name // Déclenchez un clic document.body.appendChild(a) a.click() //Supprimer setTimeout(() => document.body.removeChild(a), 1000)}

Si nous voulons télécharger une image, nous pouvons convertir l’image au format base64 puis la télécharger.

 ```export const downloadImg = async (url, nom) => { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), img = new Image(); 'Anonyme'; img.onload = function() { canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL('image/png'); let a = document.createElement('a'); .body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); toile = null; }, 1000); }; img.src = url;};```

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.