EXTJS & Java Struts export csv file

Question

I want to make a csv file and let the user download it by clicking at a button. There is a form to search users (with some search fields) and the button search : this is to search users and display them in the grid. After the form, there is a link "export to csv", this have to take the form fields values, pass it to Java (struts), then Java construct a csv file (not the same as the grid, it is more complex, many values from many tables) and return it to extjs, after that, i want to give it to the user, let him download it. The response.responseText contains the good csv to export but it is too big to do an encodeURI :(

I am not able to propose to download the file. Someone has any idea? :(

Here is the source code i did for now :

var params = Ext.getCmp("userSearchEngine").getForm().getValues(false);
Ext.Ajax.request({
    url : cmts.server + 'exportToCSV.do',
    method: 'POST',
    headers: { 'Content-Type': 'text/csv'},                    
    params : params,

    success: function ( response, request ) {
        console.log('success');
        console.log(response.responseText);
    },

    failure: function ( response, request ) {
        console.log('FAIL !');
    }
});

Thanks for your help :)

EDIT : the Java part writes in the outputstream of the response

EDIT 2 : Due to some limitations, i cannot create files on the server side

Answer 1

I use this approach:

1. One Ext.form.FieldContainer as a link.
2. Server side (in my case PHP) generates the file in 'tmp' directory.
3. Server side returns valid JSON, which contains the name of the generated file.
4. AJAX request changes the link of Ext.form.FieldContainer.

Partial example:

ExtJS part - fieldcontainer:

{
id: 'generatecsv',
xtype: 'fieldcontainer',
width: 100,
layout: 'vbox',
items: [
    {xtype: 'displayfield', value: ''},
    {
    id: 'dds19_link_disk',
    xtype: 'box', 
    autoEl: {
        html: '<a href="./tmp/" target="_blank">Download CSV</a>',
        width: 100
    } 
    }
]   
}

ExtJS - AJAX request:

Ext.Ajax.request({
    method: 'POST', 
    url: './src/xxxxx.php',
    jsonData: Ext.JSON.encode({
    }),
    success: function(response){
        var r = Ext.JSON.decode(response.responseText);
        if (r.success == true) { 
            Ext.getCmp('generatecsv').el.update('<a href="./tmp/'+r.filename+'" target="_blank">ZIP архив</a>');
        } else {
            Ext.Msg.alert('Error', r.errmsg);       
        };
    },
    failure: function(response){
        Ext.Msg.alert('Error', 'Error.');       
    }
});

Valid JSON from server:

{
"success": true,
"filename": "generated_file_name.csv"
}

Answer 2

for downloadfile you can try form submit

var form = Ext.create('Ext.form.Panel', {
  standardSubmit : true,
  url : url,
  method : 'POST' // OR 'GET'
});

form.submit({
  target : '_blank',
  params : {

  }
});

and in serverside - java :

response.setContentType("application/vnd.ms-excel");
response.addHeader("Content-Disposition",
    "attachment; filename=" + URLEncoder.encode(fileName)
        + ".csv");

IOUtils.copy(theCSVInputStream, response.getOutputStream())