ExtJS 4 - How to download a file using Ajax?

Question

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.

Answer 1

You may use component 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.com/blog/post.php?s=2011-06-09-download-a-file-via-an-event-for-extjs4 This thing works for me.