Maison >interface Web >js tutoriel >Comment puis-je déclencher un téléchargement de fichier à l'aide d'Ajax sans interrompre l'interaction de l'utilisateur ?

Comment puis-je déclencher un téléchargement de fichier à l'aide d'Ajax sans interrompre l'interaction de l'utilisateur ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-28 19:41:11694parcourir

How Can I Trigger a File Download Using Ajax Without Interrupting User Interaction?

Activer le téléchargement de fichiers avec Ajax

À l'ère de la programmation asynchrone, il est souvent nécessaire de télécharger un fichier sans interrompre l'interaction de l'utilisateur. Cette question explore comment télécharger un fichier à l'aide d'Ajax tout en invitant l'utilisateur à enregistrer le fichier localement.

Dans l'action Struts2 fournie, un fichier peut être téléchargé à l'aide d'un résultat de flux. Cependant, publier directement sur cette action à l'aide de jQuery affichera le fichier dans le navigateur sous forme de flux binaire. Pour déclencher la fenêtre de téléchargement de fichiers, une approche différente est nécessaire.

Solution de navigateur moderne

Les navigateurs modernes offrent une solution plus simple. À l'aide de l'API fetch(), vous pouvez récupérer le fichier sous forme de blob et créer une URL temporaire pour le téléchargement.

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;
    // Set the download filename
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('File download complete!');
  })
  .catch(() => alert('File download failed!'));

Cette approche nécessite un navigateur moderne prenant en charge l'API fetch() et createObjectURL(). méthode.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn