Extjs 4 (avec un code pour 3.4 ci-dessous) le téléchargement d'un fichier retourné par une requête post

Il semble y avoir aucune solution impénétrable, mais il existe plusieurs approches que je voudrais essayer:

1) Utiliser un iframe au lieu d'un vrai XHR pour publier des données au serveur, par exemple <form action="/something" target="myiframe"> où myiframe est le name de votre iframe masqué. De cette façon, votre formulaire utiliser l'iframe (pas votre fenêtre principale) de soumettre des données à la configuration de l'URL. Votre serveur doit être mis en-tête de réponse que application/octet-stream (ou certains ither type MIME des données binaires) de sorte que le navigateur déclenche le téléchargement. Dans le cas contraire (si le html retourné dans votre cas) il vous suffit de récupérer de l'iframe corps innerHTML et de l'afficher à l'utilisateur dans l'INTERFACE utilisateur. Lors de l'utilisation d'une iframe (ou une nouvelle fenêtre) au lieu de XHR ne sonne pas comme la meilleure idée, cette solution semble être la plus fiable à ce jour (et avec la meilleure prise en charge du navigateur).

Ici est légèrement modifié pour exemple de Ext.forme.De base docs page:

Ext.create('Ext.form.Panel', {
    title: 'Basic Form',
    renderTo: Ext.getBody(),
    width: 350,

    //Any configuration items here will be automatically passed along to
    //the Ext.form.Basic instance when it gets created.

    //*THIS* makes the form use a standard submit mechanism, not XHR
/**/standardSubmit: true,

    //URL to submit to
    url: 'save-form.php',

    items: [{
        fieldLabel: 'Field',
        xtype: 'textfield',
        name: 'theField'
    }],

    buttons: [{
        text: 'Submit',
        handler: function() {
            //The getForm() method returns the Ext.form.Basic instance:
            var form = this.up('form').getForm();
            if (form.isValid()) {
                //Submit the Ajax request and handle the response
                form.submit({
                    success: function(form, action) {
                       Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    },

                    //You can put the name of your iframe here instead of _blank
                    //this parameter makes its way to Ext.form.Basic.doAction() 
                    //and further leads to creation of StandardSubmit action instance
/**/                target: '_blank'                        
                });
            }
        }
    }]
});

Il y a deux paramètres clés ici (lignes marquées avec /**/):

1. standardSubmit: true config que vous transmettez à votre formulaire de lui faire faire une norme de soumettre à la place de XHR.
2. Le passage d'un target paramètre de la forme du soumettre action. Cette fonction n'est pas documentée, mais vous pouvez voir qu'il est utilisé dans Ext.forme.d'action.Soumettre code source (toutes les options que vous passez à Ext.forme.De base.submit() méthode de finir comme les paramètres de la Poste.forme.d'action.* exemple.

Dans l'exemple de code que j'ai mis target: '_blank' de démontrer qu'il fonctionne tout de suite (allez créer une nouvelle fenêtre de navigateur). Vous pouvez le remplacer par le nom de votre iframe plus tard, mais je vous suggère de d'abord tester le fonctionnement de votre formulaire s'envoie des données à un régulière nouvelle fenêtre, puis de développer une logique qui crée et transforme une iframe. Vous aurez à traiter le résultat à l'intérieur de l'iframe vous-même, la pensée. Il n'est pas difficile, voir Ext.les données.Connexion.upload() mise en œuvre comme un exemple de l'iframe de traitement.

ExtJS effectivement utilise déjà le iframe technique pour le fichier uploads. Voir Ext.les données.Connexion et Ext.forme.champ.Champ.isFileUpload() pour avoir une idée de la façon dont il fonctionne.

2) Suggéré ici: À l'aide de HTML5/Javascript pour générer et enregistrer un fichier.

Si vous ne voulez pas aller à l'iframe façon, vous pouvez essayer de générer données URI à partir des données de réponse et accédez à l'URI de déclenchement de téléchargement:

content = "Hello world!";
uriContent = "data:application/octet-stream," + encodeURIComponent(content);
window.location.href = uriContent;

De nouveau, type mime est ici essentielle. Cela a fonctionné pour moi, il faut noter, cependant, que les navigateurs imposer une limite de taille de données Uri (256 ko est un pari sûr).

3) une Autre réponse dans ce thread liens vers FileSaver.js bibliothèque implémente l' (abandonné?) w3 spec. D'utilisation et de démonstration ici. Il utilise [BlobBuilder] pour générer un blob binaire de données qui n'est plus utilisé pour initialiser les téléchargements à l'aide de plusieurs méthodes. Bien que cette solution semble fonctionner, il utilise l'Api obsolète et ne peut pas être l'avenir.

OriginalL'auteur Dmitry Pashkevich

Vous n'avez pas besoin de créer un panneau de formulaire et de le rendre cachés dans votre extjs fichier. On peut ajouter un formulaire html et cliquez sur le bouton de extjs fichier nous pouvons envoyer le formulaire à l'aide de l'url. Cela fonctionne à la fois dans IE ainsi que les navigateurs google chrome. Ci-dessous mon code, je l'ai essayé et sa fonctionne très bien,

<form action="<%=fullURL%>/DownloadServlet.do" method="get" id="downloadForm"   name="downloadForm" target="_self">
</form>

click: 
  {
     fn: function()
    { 
       document.getElementById('downloadForm').submit();    
    }
  }   

OriginalL'auteur Xibalban