I have a form with various textfields and two buttons - Export to Excel and Export to CSV.

The user can provide the values to different fields in the form and click one of the buttons.

Expected behaviour is that an Ajax request should be fired carrying the values of fields as parameters and the chosen file (Excel/CSV as per the button click) should get downloaded (I am not submitting the form as there needs to be done some processing at the values before submit).

I have been using the following code in success function of Ajax request for the download:

result  =   Ext.decode(response.responseText);

try {
    Ext.destroy(Ext.get('testIframe'));
}

catch(e) {}

Ext.core.DomHelper.append(document.body, {
    tag: 'iframe',
    id:'testIframe',
    css: 'display:none;visibility:hidden;height:0px;',
    src: result.filename,
    frameBorder: 0,
    width: 0,
    height: 0
});

The above code has been working fine in the case when the file is created physically at the server. But in my current project, the file is not created at the server, rather the contents are just streamed to the browser with proper headers.

Thus, is there a way to download a file using Ajax when the file is not present at the server physically? Just to add that I have a long list of parameters which I need to send to the server and hence can not add them all to the src of iframe.

Could anyone guide at this?

Thanks for any help in advance.

I have a form with various textfields and two buttons - Export to Excel and Export to CSV.

The user can provide the values to different fields in the form and click one of the buttons.

Expected behaviour is that an Ajax request should be fired carrying the values of fields as parameters and the chosen file (Excel/CSV as per the button click) should get downloaded (I am not submitting the form as there needs to be done some processing at the values before submit).

I have been using the following code in success function of Ajax request for the download:

result  =   Ext.decode(response.responseText);

try {
    Ext.destroy(Ext.get('testIframe'));
}

catch(e) {}

Ext.core.DomHelper.append(document.body, {
    tag: 'iframe',
    id:'testIframe',
    css: 'display:none;visibility:hidden;height:0px;',
    src: result.filename,
    frameBorder: 0,
    width: 0,
    height: 0
});

The above code has been working fine in the case when the file is created physically at the server. But in my current project, the file is not created at the server, rather the contents are just streamed to the browser with proper headers.

Thus, is there a way to download a file using Ajax when the file is not present at the server physically? Just to add that I have a long list of parameters which I need to send to the server and hence can not add them all to the src of iframe.

Could anyone guide at this?

Thanks for any help in advance.

• javascript
• ajax
• extjs
• download
• extjs4

• 1 stackoverflow./questions/5753811/get-response-file-use-extjs/… – Amol Katdare Commented Oct 12, 2011 at 18:38
• Thanks for sharing the link Amol. I went through it and the only reason why I didn't use it was that I was unable to pass parameters to the server this way. As mentioned in the question, I have a long list of parameters which I can not append to the URL and pass to the server. Is there any work around for this which you can suggest? Thanks again. – netemp Commented Oct 13, 2011 at 4:28
• Regarding downloading a file via POST, see stackoverflow./questions/7563791/… though I don't like the top answer there currently since it seems to ignore the requirement to use javascript to initiate the download. – James Clark Commented Dec 8, 2011 at 1:42

1 Answer 1

You may use ponent like this:

Ext.define('CMS.view.FileDownload', {
    extend: 'Ext.Component',
    alias: 'widget.FileDownloader',
    autoEl: {
        tag: 'iframe', 
        cls: 'x-hidden', 
        src: Ext.SSL_SECURE_URL
    },
    stateful: false,
    load: function(config){
        var e = this.getEl();
        e.dom.src = config.url + 
            (config.params ? '?' + Ext.urlEncode(config.params) : '');
        e.dom.onload = function() {
            if(e.dom.contentDocument.body.childNodes[0].wholeText == '404') {
                Ext.Msg.show({
                    title: 'Attachment missing',
                    msg: 'The document you are after can not be found on the server.',
                    buttons: Ext.Msg.OK,
                    icon: Ext.MessageBox.ERROR   
                })
            }
        }
    }
});

Put it somewhere in viewport, for example:

{
    region: 'south',
    html: 'South',
    items: [
        {
            xtype: 'FileDownloader',
            id: 'FileDownloader'
        }
    ]
}

Do not forget to require it in your viewport class:

requires: [
    'CMS.view.FileDownload'
]

Action handler may look like this:

var downloader = Ext.getCmp('FileDownloader')
downloader.load({
    url: '/attachments/' + record.get('id') + '/' + record.get('file')
});

It's very important to have Content-Disposition header in response, otherwise nothing is downloaded.

Regards go to http://www.quispiam./blog/post.php?s=2011-06-09-download-a-file-via-an-event-for-extjs4 This thing works for me.