下载从邮件请求返回的文件的Extjs 4(下面的代码为3.4)

Question

我已经看到了与此略有关系的问题,但没有一个能解决我的问题.我已经设置了Ext.Ajax.request,如下所示:

var paramsStringVar = 'param1=1&param2=two&param3=something&param4=etc';

Ext.Ajax.request({
  url: '/cgi-bin/url.pl',
  method:'POST',
  params:paramsStringVar,
  timeout:120000,
  success: function(response, opts){
    var objhtml = response.responseText; //content returned from server side
    console.log(objhtml);
  }

});

此请求从后端检索适当的内容.一个参数是outputType,它可以取值{html,excel,csv}.当返回html进行显示时,我能够正确处理和显示它.现在问题......

当我将outputType参数设置为csv或excel时,我会根据请求将相应的内容作为csv或tsv(excel)返回.但是,我不想要内容,我想提示下载文件(csv或excel).如何让浏览器自动提示用户下载文件而不是仅仅检索extjs中的文本内容？

版本4.07所以我不能使用任何4.1唯一的功能

Answer 1

似乎没有防弹解决方案但我会尝试几种方法:

1)使用的iframe,而不是真正的XHR POST数据到服务器,如<form action="/something" target="myiframe">这里myiframe是name您隐藏的iframe的.这样,您的表单将使用iframe(而不是您的主窗口)将数据提交到配置的URL.您的服务器应将响应标头设置为application/octet-stream(或二进制数据的一些MIME类型),以便浏览器触发下载.否则(如果在你的情况下返回html)你可以只检索iframe的body innerHTML并在UI中将其显示给用户.虽然使用iframe(或新窗口)而不是XHR听起来不是最好的主意,但这个解决方案似乎是迄今为止最可靠的(并且具有最佳的浏览器支持).

以下是Ext.form.Basic文档页面中略有修改的示例:

Ext.create('Ext.form.Panel', {
    title: 'Basic Form',
    renderTo: Ext.getBody(),
    width: 350,

    // Any configuration items here will be automatically passed along to
    // the Ext.form.Basic instance when it gets created.

    // *THIS* makes the form use a standard submit mechanism, not XHR
/**/standardSubmit: true,

    // URL to submit to
    url: 'save-form.php',

    items: [{
        fieldLabel: 'Field',
        xtype: 'textfield',
        name: 'theField'
    }],

    buttons: [{
        text: 'Submit',
        handler: function() {
            // The getForm() method returns the Ext.form.Basic instance:
            var form = this.up('form').getForm();
            if (form.isValid()) {
                // Submit the Ajax request and handle the response
                form.submit({
                    success: function(form, action) {
                       Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    },

                    // You can put the name of your iframe here instead of _blank
                    // this parameter makes its way to Ext.form.Basic.doAction() 
                    // and further leads to creation of StandardSubmit action instance
/**/                target: '_blank'                        
                });
            }
        }
    }]
});

这里有两个关键参数(标有的行/**/):

1. standardSubmit: true 传递给表单的配置将使其执行标准提交而不是XHR.
2. 将target参数传递给表单的提交操作.此功能未记录,但您可以看到它在Ext.form.action.Submit源代码中使用(您传递给Ext.form.Basic.submit()方法的所有选项最终都是Ext.form.action的参数.*实例.

在示例代码中,我target: '_blank'用来证明它可以立即工作(将创建一个新的浏览器窗口).您可以稍后将其替换为iframe的名称,但我建议您首先测试表单如何将数据提交到常规新窗口,然后开发创建和处理iframe的逻辑.想一想,你必须自己在iframe中处理结果.这并不困难,请参阅Ext.data.Connection.upload()实现作为iframe处理的示例.

ExtJS实际上已经使用该iframe技术进行文件上传.请参阅Ext.data.Connection和Ext.form.field.Field.isFileUpload()以了解它如何工作.

2)建议在这里:使用HTML5/Javascript生成并保存文件.

如果您不想使用iframe方式,可以尝试从响应数据生成数据URI并导航到该URI触发下载:

content = "Hello world!";
uriContent = "data:application/octet-stream," + encodeURIComponent(content);
window.location.href = uriContent;

同样,mimetype在这里是必不可少的.这对我有用,但是你应该注意,浏览器对数据URI施加了大小限制(256Kb是一个安全的赌注).

3)在提到的线程中的另一个答案链接到FileSaver.js库实现(废弃？)w3规范.用法和演示在这里.它使用[BlobBuilder]生成一个二进制数据blob,进一步用于使用多种方法之一初始化下载.虽然此解决方案似乎有效,但它使用了已弃用的API,可能无法面向未来.

Answer 2

以下是我的解决方案.这就是我目前的工作方式.响应根据text/csv的响应类型生成下载/打开提示.请注意,不需要iFrame或对iframe的引用.我花了很多时间来讨论对iFrame的需求,这实际上破坏了我的解决方案.生成下载提示不需要iFrame.需要的是与此类似的请求(submittal),以及生成带有text/csv响应头的适当csv的后端.

var hiddenForm = Ext.create('Ext.form.Panel', {
  title:'hiddenForm',
  standardSubmit: true,
  url: /cgi-bin/url.pl
  timeout: 120000,
  height:0,
  width: 0,
  hidden:true,
  items:[
    {xtype:'hiddenField', name:'field1', value:'field1Value'},
    // additional fields
  ]
})

hiddenForm.getForm().submit()

标准提交行至关重要