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 =真