Javascript ExtJS4-如何使用Ajax下载文件？

我有一个带有各种文本字段和两个按钮的表单-导出到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中。

有人能在这方面指导吗

---

提前感谢您的帮助。

您可以使用如下组件：

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

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

将其放置在视口中的某个位置，例如：

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

不要忘记在视口类中需要它：

requires: [
    'CMS.view.FileDownload'
]

操作处理程序可能如下所示：

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

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

响应内容处置头非常重要，否则不会下载任何内容

问候

---

这东西对我很有用。

谢谢分享链接Amol。我检查了它，我没有使用它的唯一原因是我无法通过这种方式将参数传递给服务器。正如问题中提到的，我有一个很长的参数列表，我无法将其附加到URL并传递到服务器。你有什么建议吗？再次感谢。关于通过POST下载文件，尽管我不喜欢上面的答案，因为它似乎忽略了使用javascript启动下载的要求。这非常有效，除了4.2.2中的onload从不触发dom.onload事件