Extjs 4 téléchargement d'un fichier à travers un appel ajax

Le problème est très simple: j'ai télécharger un fichier quand je soumettre un formulaire, c'est un appel ajax lorsque le formulaire est soumis, ce qui me permet de construire un fichier avec les données de la forme, côté serveur et envoyer un lien à une alerte. Le fait est que mon patron souhaitez que le fichier soit téléchargé directement et non par l'intermédiaire d'un lien dans un message d'alerte. J'ai donc assurez-vous que le fichier est disponible côté serveur par le biais de la tornade(web):

        self.set_header('Content-Type', 'application/octet-stream')
        self.set_header('Content-Disposition', 'attachment; filename=clients_counter.zip')
        with open("static/clients_counter.zip", 'r') as f:
            while True:
                data = f.read()
                if not data:
                    break
        self.write(data)
        self.finish()

Du côté serveur, le code semble fonctionner très bien, mais le côté client (extjs4.1) c'est vraiment un cauchemar. C'est ainsi que mon appel ajax dirait que maintenant, et ça ne fonctionne pas:

Ext.Ajax.request({
method : "GET",
url : 'http://whatever.com/count?client='+client+'&start='+start+'&end='+end,
timeout : 30000,
success :
         function (response) {
    //Ext.Msg.alert(response.responseText);
            desktop.getWindow('count-win').doClose();
            return response;
       }//handler,
     failure : 
     function(response) {
    alert("Wrong request");
    }});

Ce n'est pas Ext JS; en fait, aucun navigateur va initier le téléchargement du fichier off un appel Ajax. Le standard de la façon de le faire est de créer une forme invisible et de le soumettre.

OriginalL'auteur softwareplay | 2013-12-10

Après avoir lu sur diverses sources de Ext JS forum et ici dans stackoverflow, ci-dessous est l'approche que j'ai choisi (à l'aide de Ext JS version 4.2.1):

downloadFile: function(config){
    config = config || {};
    var url = config.url,
        method = config.method || 'POST',//Either GET or POST. Default is POST.
        params = config.params || {};

    //Create form panel. It contains a basic form that we need for the file download.
    var form = Ext.create('Ext.form.Panel', {
        standardSubmit: true,
        url: url,
        method: method
    });

    //Call the submit to begin the file download.
    form.submit({
        target: '_blank', //Avoids leaving the page. 
        params: params
    });

    //Clean-up the form after 100 milliseconds.
    //Once the submit is called, the browser does not care anymore with the form object.
    Ext.defer(function(){
        form.close();
    }, 100);

}

- Je insérer cette fonction dans un mixin pour être plus portable: gist.github.com/oniram88/10730767
Est-il de toute façon à appliquer un "traitement télécharger" masque lors du téléchargement d'un fichier?
Je doute qu'il est possible avec la solution ci-dessus, car le formulaire est fermé peu après que le navigateur télécharge le fichier.
Je sais que c'est vieux, mais est-il possible d'inclure jsonData dans la norme soumettre en quelque sorte? Je peux le faire avec Ext.Ajax.request, mais ne peut pas comprendre comment le faire fonctionner avec form.submit...
je l'ai mis dans un code et mon navigateur (FireFox) ne pas télécharger quoi que ce soit, il vient d'ouvrir dans un autre onglet.

OriginalL'auteur sakadas

5

J'ai eu un problème similaire en train de télécharger un Fichier Excel dans un appel Ajax je l'ai résolu de cette façon:

Faire un standard de soumettre à la place de l'Ajax.
```
var form = Ext.create('Ext.form.Panel', { //this wolud be your form 
    standardSubmit: true,         //this is the important part 
    url: '../ObtenerArchivoAdjuntoServlet' 
});

form.submit({
    params: {
       nombreArchivo: nombreArchivo
    }
});
```
Après cela, vous devriez être en mesure de revenir au fichier désiré.

De cette façon, le succès de rappel ne fonctionne pas
Vous n'avez pas à gérer la réponse car c'est un standard soumettre. Je pensais la même chose la première fois que j'ai fait il, regardez: stackoverflow.com/questions/18434962/...
Est-il un moyen de mettre en œuvre un "traitement du fichier" masque?

OriginalL'auteur Jonathan Caballero
2

Je pense que vous pouvez prendre une beaucoup plus facile solution. Oublier l'ajax, et juste obtenir un bon vieux js pour ouvrir le fichier pour vous:
```
window.open('http://whatever.com/count?client='+client+'&start='+start+'&end='+end)
```
Cela permettra d'ouvrir un nouvel onglet et démarrer le téléchargement à partir de là.

OriginalL'auteur Kyle Fransham

Après l'extraction/de la lecture de nombreux posts, j'ai réussi à obtenir cette simple méthode de travail..

                Ext.create('Ext.form.Panel', {
                    renderTo: Ext.getBody(),
                    standardSubmit: true,
                    url: 'URL'
                }).submit({params: {'PARAM1': param1, 'PARAM2': param2}});

Oui, cela fonctionne bien. Si vous utilisez Sencha Cmd pour construire vous aurez besoin de besoin " Ext.forme.d'action.StandardSubmit' également. Merci et à tous les ci-dessus également.

OriginalL'auteur John

0

J'ai juste eu à l'annonce du succès de la fonction de la requête ajax:
```
window.open('urltothefile.ext')
```
Je continue de penser que l'ajax n'est pas nécessaire. Vous pouvez faire appel à l'extérieur de la réussite.
Vous êtes toujours l'ouverture d'une fenêtre avec une url ... j'aurais le navigateur invitant la fenêtre de téléchargement en changeant le type de réponse ...
Avec la norme soumettre approche

OriginalL'auteur softwareplay

Le code suivant utilisé pour télécharger le fichier à l'aide de extjs 5 ou 6. Ajoutez le code suivant à la méthode et l'invoquons pour le bouton d'action. Cette télécharge le fichier directement insteadof ouverture dans un nouvel onglet.

utiliser une iframe comme ceci:

/**
 * prints the file
 */
printReport: function () {
    var url = 'downloadURL';
    Ext.Ajax.request({
        url: url,
        method: 'GET',
        autoAbort: false,
        success: function(result) {
            if(result.status == 204) {
                Ext.Msg.alert('Empty Report', 'There is no data');
            } else if(result.status == 200) {
                Ext.DomHelper.append(Ext.getBody(), {
                    tag:          'iframe',
                    frameBorder:  0,
                    width:        0,
                    height:       0,
                    css:          'display:none;visibility:hidden;height:0px;',
                    src:          url
                });
            }
        },
        failure: function() {
            //failure here will automatically
            //log the user out as it should
        }
    });
}

Copié la réponse de extjs forum

Option:2
Si vous voulez ouvrir le fichier dans un nouvel onglet

    /**
 * open file in tab
 */
openReport: function () {
    var url = 'downloadURL';
    Ext.Ajax.request({
        url: url,
        method: 'GET',
        autoAbort: false,
        success: function(result) {
            if(result.status == 204) {
                Ext.Msg.alert('Empty Report', 'There is no data');
            } else if(result.status == 200) {
                var win = window.open('', '_blank');
                win.location = url;
                win.focus();
            }
        },
        failure: function() {
            //failure here will automatically
            //log the user out as it should
        }
    });
}

OriginalL'auteur Sudhakar

Vous devez vous connecter pour publier un commentaire.