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

我有一个形式与各种文本框和两个按钮 - 导出到Excel和导出到CSV。ExtJS 4 - 如何使用Ajax下载文件？

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

预期的行为是应该触发一个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。

任何人都可以在此指导？

感谢您提前提供任何帮助。

来源

2011-10-12 netemp

http://stackoverflow.com/questions/5753811/get-response-file-use-extjs/5757369#5757369 –

感谢您分享链接Amol。我经历了它，而我没有使用它的唯一原因是我无法以这种方式将参数传递到服务器。正如问题中提到的，我有一长串参数，我不能附加到URL并传递给服务器。有什么可以解决的，你可以建议吗？再次感谢。 – netemp

关于通过POST下载文件，请参阅http://stackoverflow.com/questions/7563791/is-it-possible-to-download-a-file-with-http-post虽然我不喜欢那里的最佳答案目前，因为它似乎忽略了使用JavaScript来启动下载的要求。 –

你可以使用组件这样的：

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 这件事情适合我。

来源

2011-12-08 00:56:06 Alik

这个工程很好，除了onload永远不会触发4.2.2中的dom.onload事件 – boatcoder

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

回答

相关问题