ExtJS 5 - 从POST servlet请求下载文件 [英] ExtJS 5 - Download file from POST servlet request

问题描述

我已经尝试使用表单提交方法在ExtJS 5中实现导出功能。而且我看过下面的stackoverflow链接，它帮助但不完全。

I have trying to implement the export functionality in ExtJS 5 using form submit method. And I had look at the following stackoverflow link, it helps but not fully.

Extjs 4（下面是3.4的代码）下载从发帖请求中返回的文件

在我的情况下，我在请求响应成功后面临一个问题，得到无效的JSON编码错误。我试图将读者从JSON读取器更改为其他字符串读取器（在链接中提到），但它是由于某些原因，相当成功。

In my case i facing an issue after the request response is successful, getting invalid JSON encoding error.Even i tried to change the reader from JSON reader to some other string reader(mentioned in link), but it is quite successful for some reason.

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

代码： -

  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' 
    });  

错误消息： -

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

来自Java servlet（CSV）的输出响应： -

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

我认为由于这个编码问题，即使在请求返回200个成功状态之后;浏览器下载窗口没有弹起来！你的帮助非常感激，谢谢提前！

I think because of this encoding issue,even after the request returns 200 success status; the browser download window is not getting poped up! You help is much appreciated, thanks in advance!

我已经修改了下面的代码，但仍然是浏览器下载没有发生，尽管响应是200。

I have modified the code something like below, but still the browser download is not happening event though the response is 200.

使用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');
      }
    }); 

注意：我正在使用Google Chrome浏览器！

Note: I'm using Google Chrome browser!

谢谢！

推荐答案

导出可以通过ajax调用实现，创建一个Blob的响应并使用msSaveBlob保存。这可以在现代浏览器ie10和以上

export can be achieved with ajax call, creating a Blob out of the response and saving using msSaveBlob. this works in modern browsers ie10 and above

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
    }    
}

这篇关于ExtJS 5 - 从POST servlet请求下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！