Gérer le téléchargement de fichiers à partir d'un post ajax

Question

J'ai une application javascript qui envoie des requêtes POST ajax à une certaine URL. La réponse peut être une chaîne JSON ou un fichier (en pièce jointe). Je peux facilement détecter Content-Type et Content-Disposition dans mon appel ajax, mais une fois que j'ai détecté que la réponse contient un fichier, comment puis-je proposer au client de le télécharger ? J'ai lu un certain nombre de fils similaires ici, mais aucun d'entre eux ne fournit la réponse que je recherche.

Je vous en prie, ne postez pas de réponses suggérant que je ne devrais pas utiliser ajax pour cela ou que je devrais rediriger le navigateur, car rien de tout cela n'est possible. L'utilisation d'un simple formulaire HTML n'est pas non plus envisageable. Ce dont j'ai besoin, c'est de montrer une boîte de dialogue de téléchargement au client. Est-ce possible et comment ?

Answer 1

Je vois que vous avez déjà trouvé une solution, mais je voulais juste ajouter quelques informations qui pourraient aider quelqu'un qui essaie d'obtenir la même chose avec de grosses requêtes POST.

J'ai eu le même problème il y a quelques semaines, en effet il n'est pas possible d'obtenir un téléchargement "propre" par AJAX, le groupe Filament a créé un plugin jQuery qui fonctionne exactement comme vous l'avez déjà découvert, il s'appelle Téléchargement du fichier jQuery Cette technique présente toutefois un inconvénient.

Si vous envoyez de grosses requêtes via AJAX (disons des fichiers de 1 Mo), cela aura un impact négatif sur la réactivité. En cas de connexion Internet lente, vous devrez attendre beaucoup jusqu'à ce que la demande soit envoyée et aussi attendre que le fichier soit téléchargé. Ce n'est pas comme un "clic" instantané => "popup" => "début du téléchargement". C'est plutôt "clic" => "attente de l'envoi des données" => "attente de la réponse" => "début du téléchargement", ce qui donne l'impression que le fichier double de taille parce qu'il faut attendre que la demande soit envoyée par AJAX et qu'elle soit renvoyée sous forme de fichier téléchargeable.

Si vous travaillez avec des fichiers de petite taille (<1MB), vous ne le remarquerez pas. Mais comme je l'ai découvert dans ma propre application, pour des fichiers de plus grande taille, c'est presque insupportable.

Mon application permet aux utilisateurs d'exporter des images générées dynamiquement, ces images sont envoyées par des requêtes POST au format base64 au serveur (c'est la seule façon possible), puis traitées et renvoyées aux utilisateurs sous forme de fichiers .png, .jpg, les chaînes base64 pour les images de 1 Mo sont énormes, ce qui oblige les utilisateurs à attendre plus que nécessaire le début du téléchargement du fichier. Dans le cas de connexions Internet lentes, cela peut être vraiment gênant.

Ma solution pour cela était d'écrire temporairement le fichier sur le serveur, une fois qu'il est prêt, de générer dynamiquement un lien vers le fichier sous la forme d'un bouton qui passe de l'état "Please wait..." à l'état "Download" et en même temps, d'imprimer l'image base64 dans une fenêtre popup de prévisualisation pour que les utilisateurs puissent faire un "clic droit" et l'enregistrer. Cela rend tout le temps d'attente plus supportable pour les utilisateurs, et accélère également les choses.

Mise à jour du 30 septembre 2014 :

Des mois ont passé depuis que j'ai posté ce message, j'ai finalement trouvé une meilleure approche pour accélérer les choses lorsque l'on travaille avec de grosses chaînes de caractères en base64. Je stocke maintenant les chaînes base64 dans la base de données (en utilisant les champs longtext ou longblog), puis je passe son ID d'enregistrement à travers le téléchargement de fichiers jQuery, enfin sur le fichier de téléchargement script j'interroge la base de données en utilisant cet ID pour tirer la chaîne base64 et la passer à travers la fonction de téléchargement.

Télécharger script Exemple :

<?php
// Record ID
$downloadID = (int)$_POST['id'];
// Query Data (this example uses CodeIgniter)
$data       = $CI->MyQueries->GetDownload( $downloadID );
// base64 tags are replaced by [removed], so we strip them out
$base64     = base64_decode( preg_replace('#\[removed\]#', '', $data[0]->image) );
// This example is for base64 images
$imgsize    = getimagesize( $base64 );
// Set content headers
header('Content-Disposition: attachment; filename="my-file.png"');
header('Content-type: '.$imgsize['mime']);
// Force download
echo $base64;
?>

Je sais que cela va bien au-delà de la question posée par le PO, mais j'ai pensé qu'il serait bon de mettre à jour ma réponse avec mes découvertes. Lorsque j'ai cherché des solutions à mon problème, j'ai lu de nombreux articles sur le sujet. "Télécharger à partir des données AJAX POST" qui ne m'ont pas donné la réponse que je cherchais, j'espère que ces informations aideront quelqu'un qui cherche à réaliser quelque chose comme ça.