ExtJS的4下载通过Ajax调用

Question

问题的一个文件很简单：我必须下载一个文件时，我提交表单，它是当表单提交Ajax调用，它可以让我建立从拍摄数据的文件形成，服务器端，然后将其作为一个链接到警报。事实是，我的老板想要的文件要通过警告直接链接，而不是下载。所以，我必须确保该文件是可用的服务器端通过龙卷风（网）：

 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() 

服务器端代码看起来工作正常，但在客户端（extjs4.1）是一个真正的噩梦。这是我的Ajax调用看起来像现在，它不工作：

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

Answer 1

我不得不广告Ajax请求的成功功能：

window.open('urltothefile.ext') 

Answer 2

我想你可以采取更简单的解决方案。忘掉Ajax和刚刚获得普通的老JS打开文件为您提供：

window.open('http://whatever.com/count?client='+client+'&start='+start+'&end='+end) 

这将打开一个新的标签，并从那里开始下载。

Answer 3

我有一个类似的问题，尝试下载一个Excel文件中的一个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 
    } 
}); 

在此之后，您将能够返回所需的文件。

Answer 4

阅读从Ext JS的论坛不同的来源和在这里计算器，下面是我所选择的方法（使用Ext JS的版本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); 

} 

Answer 5

提取后/读很多帖子，我设法得到这种简单的方法来工作..

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

Answer 6

使用使用ExtJS的5或6，下面的代码添加到方法并调用此为按钮动作来下载该文件下面的代码。这直接下载文件，而不是在新标签中打开。

使用iframe这样的：

/** 
* 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 
     } 
    }); 
} 

复制从extjs forum

选项回答：2 如果你想在新标签中打开文件

/** 
* 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 
     } 
    }); 
} 

Answer 7

不能使用ajax下载文件。我实现了文件ExtJS的是如AJAX下载。请参阅博客ajaxlikefiledownload。

FileDownload.downloadFile = function(arguments) { 

var url = arguments['url']; 
var params = arguments['params']; 
var successCallback = arguments['success']; 
var failureCallback = arguments['failure']; 

var body = Ext.getBody(); 

var frame = body.createChild({ 
tag:'iframe', 
cls:'x-hidden', 
id:'hiddenframe-frame', 
name:'iframe' 
}); 

var form = body.createChild({ 
tag:'form', 
cls:'x-hidden', 
id:'hiddenform-form', 
action: url, 
method: 'POST', 
target:'iframe' 
}); 


if (params) 
{ 
    for (var paramName in params) 
    { 

     form.createChild({ 
      tag:'input', 
      cls:'x-hidden', 
      id:'hiddenform-'+paramName, 
      type: 'text', 
      text: params[paramName], 
      target:'iframe', 
      value: params[paramName], 
      name: paramName 
      }); 

    } 
} 

form.dom.submit(); 

FileDownload.isFinished(successCallback,failureCallback); 

};

FileDownload.isFinished = function(successCallback,failureCallback) { 

//Check if file is started downloading 
if (Ext.util.Cookies.get('fileDownload') && Ext.util.Cookies.get('fileDownload')=='true') { 
    //Remove cookie call success callback 
    Ext.util.Cookies.set('fileDownload', null, new Date("January 1, 1970"),application.contextPath+'/'); 
    Ext.util.Cookies.clear('fileDownload',application.contextPath+'/'); 
    successCallback(); 
    return; 
} 

//Check for error/IF any error happens then frame will load with content 
try { 
    if(Ext.getDom('hiddenframe-frame').contentDocument.body.innerHTML.length>0){ 
     Ext.util.Cookies.set('fileDownload', null, new Date("January 1, 1970"),application.contextPath+'/'); 
     Ext.util.Cookies.clear('fileDownload',application.contextPath+'/'); 
     failureCallback(); 
     //Cleanup 
     Ext.getDom('hiddenframe-frame').contentDocument.body.innerHTML = ""; 

     return; 
    } 
} 
catch (e) { 
    console.log(e); 
} 

console.log('polling..'); 
// If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds 
window.setTimeout('FileDownload.isFinished('+successCallback+','+failureCallback+')', 100); 

};

用法：

FileDownload.downloadFile({ 
 
    url : url, 
 
    params : params, 
 
    success : function(){ 
 
    //Success call back here 
 
    }, 
 
    failure : function(){ 
 
    //Failure callbak here 
 
    } 
 
});

在您需要添加nammed一个cookie的HTTP响应fileDownload =真