Javascript ExtJS 4 - 如何使用 Ajax 下载文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7740146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJS 4 - How to download a file using Ajax?
提问by netemp
I have a form with various textfields and two buttons - Export to Excel and Export to CSV.
我有一个包含各种文本字段和两个按钮的表单 - 导出到 Excel 和导出到 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).
预期的行为是应该触发一个 Ajax 请求，并携带字段的值作为参数，并且应该下载所选文件（根据按钮单击的 Excel/CSV）（我没有提交表单，因为需要在提交前的值）。
I have been using the following code in success function of Ajax request for the download:
我一直在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
});
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.
因此，当文件物理上不存在于服务器上时，有没有办法使用 Ajax 下载文件？补充一点，我有一长串需要发送到服务器的参数，因此无法将它们全部添加到 iframe 的 src 中。
Could anyone guide at this?
有人可以指导吗？
Thanks for any help in advance.
提前感谢您的任何帮助。
回答by Alik
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.
响应 Content-Disposition 标头非常重要，否则不会下载任何内容。
Regards go to http://www.quispiam.com/blog/post.php?s=2011-06-09-download-a-file-via-an-event-for-extjs4This thing works for me.
问候去http://www.quispiam.com/blog/post.php?s=2011-06-09-download-a-file-via-an-event-for-extjs4这件事对我有用。
