Comment déclencher des téléchargements de fichiers de manière asynchrone avec Ajax ?

Téléchargement de fichiers de manière asynchrone à l'aide d'Ajax

Lors du téléchargement d'un fichier à l'aide d'Ajax, les données renvoyées sont généralement affichées sous forme de flux binaire. Cependant, si vous souhaitez ouvrir une fenêtre de téléchargement de fichier, vous pouvez suivre les étapes suivantes :

Mise à jour des navigateurs modernes 2019

Cette approche est recommandée pour les navigateurs modernes :

• Utilisez l'API fetch pour obtenir le fichier en tant que Blob.
• Générez une URL unique pour le Blob à l'aide de window.URL.createObjectURL.
• Créez un fichier élément, définissez son attribut href sur l'URL générée et spécifiez le nom de fichier souhaité à l'aide de l'attribut download.
• Ajoutez l'élément au corps du document.
• Exécutez l'événement click sur l'élément element.
• Révoquer l'URL générée à l'aide de window.URL.revokeObjectURL.
• Afficher un message pour informer l'utilisateur que le fichier a été téléchargé.

Exemple de code :

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!');
  })
  .catch(() => alert('oh no!'));

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!