ExtJS 4 - 如何使用Ajax下载文件？

Question

我有一个包含各种文本字段和两个按钮的表单 - 导出到Excel并导出为CSV.

用户可以将值提供给表单中的不同字段,然后单击其中一个按钮.

预期的行为是应该触发Ajax请求,并将字段值作为参数,并且应该下载所选文件(按钮点击的Excel/CSV)(我没有提交表单,因为需要在提交前的值).

我一直在使用以下代码成功下载Ajax请求的代码:

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

在文件是在服务器上物理创建的情况下,上面的代码工作正常.但是在我当前的项目中,文件不是在服务器上创建的,而是使用正确的标题将内容流式传输到浏览器.

因此,当文件在服务器上不存在时,有没有办法使用Ajax下载文件？只是补充一点,我有一长串参数需要发送到服务器,因此无法将它们全部添加到iframe的src中.

任何人都可以指导这个吗？

在此先感谢您的帮助.

Answer 1

你可以使用这样的组件:

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

把它放在视口中的某个地方,例如:

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

不要忘记在视口类中要求它:

requires: [
    'CMS.view.FileDownload'
]

动作处理程序可能如下所示:

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

将Content-Disposition标头作为响应非常重要,否则不会下载任何内容.

问候请访问http://www.quispiam.com/blog/post.php?s=2011-06-09-download-a-file-via-an-event-for-extjs4 这件事对我有用.