Comment Ajax peut-il déclencher de manière asynchrone des boîtes de dialogue d'enregistrement de fichiers pour une expérience utilisateur améliorée ?

Téléchargements de fichiers asynchrones avec Ajax : débloquer la boîte de dialogue d'enregistrement de fichiers

À l'ère numérique, les téléchargements de fichiers sont omniprésents. Grâce aux capacités d'Ajax, nous pouvons améliorer l'expérience utilisateur en autorisant les téléchargements de fichiers de manière asynchrone sans interrompre les interactions avec les pages Web.

Le problème

Lors de l'utilisation d'une action Struts2 pour un fichier côté serveur le téléchargement, l'invocation de l'action via jQuery récupère les données dans un flux binaire. Cependant, le résultat souhaité est de déclencher une boîte de dialogue d'enregistrement de fichier qui permet aux utilisateurs d'enregistrer le fichier localement.

Solution de navigateur moderne

Pour les navigateurs modernes, l'approche suivante est recommandé :

<br>fetch('your-download-endpoint').then(resp => resp.blob()).then(blob => {<br> const url = window.URL.createObjectURL(blob);<br> const a = document.createElement('a');<br> a.style .display = 'none';<br> a.href = url;<br> a.download = 'your-file-name'; // Spécifiez le nom de fichier souhaité<br> document.body.appendChild(a);<br> a.click();<br> window.URL.revokeObjectURL(url);<br>});<br>

Ce code crée une URL temporaire pour les données blob, qui est ensuite attachée à un élément d'ancrage ajouté au corps du document. Cliquer sur cet élément d'ancrage caché déclenche la boîte de dialogue d'enregistrement du fichier et, une fois le téléchargement terminé, l'URL temporaire est révoquée.

Considérations

Bien que cette approche fonctionne bien pour Pour les fichiers de petite à moyenne taille, il est important de prendre en compte la consommation de mémoire pour les téléchargements très volumineux. Si vous prévoyez des fichiers volumineux, des techniques alternatives telles que l'utilisation d'une iframe et d'un cookie peuvent être plus adaptées.

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!