ExtJS 5 - Download-Datei von POST-servlet-Anfrage

Habe ich versucht zu implementieren, die export-Funktionalität in ExtJS 5 die Verwendung von Formular-submit-Methode. Und ich hatte Blick auf den folgenden stackoverflow-link, es hilft aber nicht vollständig.

Extjs 4 (mit einem code für 3.4 unten) herunterladen einer Datei zurück von einer post-Anforderung

In meinem Fall habe ich vor einem Problem nach dem Anfrage-Antwort erfolgreich ist, immer ungültige JSON-encoding-Fehler.Auch habe ich versucht, die Leser, die aus JSON-reader, um einige der anderen string-reader(siehe link), aber es ist ziemlich erfolgreich aus irgendeinem Grund.

http://www.sencha.com/forum/showthread.php?86704-handling-xml-response-on-form-submit

- Code:-

  var form = Ext.create('Ext.form.Panel',{
    timeout: 60000
  });
  var basicForm = form.getForm();
  basicForm.errorReader= new String();
    basicForm.submit({
        url     :  GRID_EXPORT_URL,
        method  : 'POST',
        headers : {
            "USER": user,
            "SERVERSESSIONID": serverSessionId,
            "Content-Type":"application/x-www-form-urlencoded"
        },  
        params  : {
            gridId:"dummyGrid",
            colDescs:"col1,Name"
        },              
        scope   : this,
        success : function(responseText){              
        },
        target: '_blank' 
    });

Fehlermeldung:-

   [E] Ext.JSON.decode(): You're trying to decode an invalid JSON String: Code

Ausgabe Antwort vom Java-servlet(CSV):-

    Id,Name
    13092,Thiru
    12767,Arasu
    117,Vinod

Ich denke, weil dieses encoding Problem,auch nach der Anforderung gibt 200 Erfolg-status; der browser ein download-Fenster wird nicht immer bis poped! Sie Hilfe ist sehr willkommen, vielen Dank im Voraus!

Habe ich veränderte den code so etwas wie unten, aber immer noch den browser-download nicht geschieht, Ereignis, obwohl es nicht die Antwort ist 200.

Geänderten code mit Iframe/Form:-

onClickExport : function(){
    var body = Ext.getBody();
    var downloadFrame = body.createChild({
         tag: 'iframe',
         cls: 'x-hidden',
         id: 'app-upload-frame',
         name: 'uploadframe'
     });      
    var downloadForm = body.createChild({
         tag: 'form',
         cls: 'x-hidden',
         id: 'app-upload-form',
         target: 'app-upload-frame'
     });        
    Ext.Ajax.request ({
      url     : EXPORT_URL,
      method  : 'POST',
      form    : downloadForm,       
      timeout : 30 * 60 * 1000, //30 Minutes should be OK.
      scope   : this,
      headers : {
            "USER": user,
            "SERVERSESSIONID": serverSessionId,
            "Content-Type":"application/x-www-form-urlencoded"
      },  
      params  : {
            gridId:"dummyGrid",
            colDescs:"col1,Name"
      }, 
      success : function (r) {
        alert("Success");
      },
      failure: function(r) {
        alert('error');
      }
    });

Hinweis: ich bin mit Google Chrome browser!

Dank!

Hat deine Java-servlet-Rückkehr der Datei richtig, wenn Sie versuchen, mit einem anderen client ? (wie Advanced REST Client für Chrome)
Ja ja, es ist Francis!
Einen Blick: sencha.com/forum/... ich denke, du brauchst einen IFRAME.
Ich versuchte, fügen Sie ein iframe/form, aber immer noch das browser-popup ist nicht passiert. Geändert und Hinzugefügt den gleichen code oben!
Kann mir hier jemand helfen um dieses Problem zu beheben, bitte?
Die Tatsache, dass Sie dieses JSON decode error, ohne Ihren Hundeführer auch versuchen, mir sagt man kann ein überschreiben irgendwo. Debug-Handler, um zu sehen, Wann der Fehler passiert genau das.

InformationsquelleAutor Thirunavukkarasu Muthuswamy | 2015-03-12

exportieren kann erreicht werden, mit ajax aufrufen, erstellen Sie einen Blob aus der Reaktion und speichern mit msSaveBlob. dies funktioniert in modernen Browsern ie10 und höher

onClickExport: function() {
    CUIF.Ajax.request({
        url: '......',
        method: 'POST',
        scope: this,
        params: {
           ...
           ...
         },
        success: function(data,response) {
            this.onExportSuccess(response);
        }
    });
},

onExportSuccess: function(response){
     this.getView().unmask("Loading...");
     var disposition = response.getResponseHeader('Content-Disposition');
     var filename = disposition.slice(disposition.indexOf("=")+1,disposition.length);
     var type = response.getResponseHeader('Content-Type');
     var blob = new Blob([response.responseText], { type: type });
     if (typeof window.navigator.msSaveBlob !== 'undefined') {
        //IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob for which they were created These URLs will no longer resolve as the data backing the URL has been freed."
        window.navigator.msSaveBlob(blob, filename);
     } 
     else {
        var URL = window.URL || window.webkitURL;
        var downloadUrl = URL.createObjectURL(blob);
        if (filename) {
            //use HTML5 a[download] attribute to specify filename
            var a = document.createElement("a");
            //safari doesn't support this yet
            a.href = downloadUrl;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
        } 
        setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); //cleanup
    }    
}

Wow!!! Dieser arbeitete für mich, vielen Dank 🙂
Dies funktioniert gut in Chrome. Aber ich bin auf der Suche nach einer Lösung im IE 9. Wenn du mir helfen könntest das so gut mit!!

InformationsquelleAutor Anusha Manne

0

Haben Sie irgendwelche Header-Konfiguration für die Antwort?
```
header("Content-Type: text/csv");
header("Content-Disposition: attachment; filename=file.csv");
//Disable caching
header("Cache-Control: no-cache, no-store, must-revalidate"); //HTTP 1.1
header("Pragma: no-cache"); //HTTP 1.0
header("Expires: 0"); //Proxies
```
- Alle Header Hinzugefügt, um den servlet-request, es ist nicht passiert, nur in ExtJS(migration framework). Es funktioniert immer noch gut mit unseren aktuellen Tibco GI-RIA-framework. HTTP/1.1 200 OK Date: Fri, 13 Mar 2015 12:41:53 GMT Transfer-Encoding: chunked Content-Type: text/csv; charset=UTF-8 Content-Disposition: attachment; fileName=Report_RETRIEVECHARACTERISTICTYPE_1426250513346.csv SESSIONLOGID: 24407011 X-Powered-By: Servlet/2.5 JSP/2.1
InformationsquelleAutor Vladimir Cacic-Arapovic

Erstellen, ein Sencha, der OnPostDownloader Komponente wie diese mit unsichtbaren form und 0 height iframe.

Ext.define('MyApp.view.OnPostDownload', {
  extend: 'Ext.Component',
  alias: 'widget.OnPostDownloader',
  autoEl: {
    tag: 'iframe',
    cls: 'x-hidden',
    src: Ext.SSL_SECURE_URL
  },
  postAndDownload: function (config) {
    var invsibleForm = Ext.create('Ext.form.Panel', {
      title: 'invsibleForm',
      standardSubmit: true,
      url: config.url,
      timeout: 120000,
      height: 0,
      width: 0,
      hidden: true,
      items: [ {
        xtype: 'hiddenfield',
        name: 'mydata',
        value: config.params
      } ]
    });

    invsibleForm.getForm().submit();
  }
});

InformationsquelleAutor Sanjay Singh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.