EXTJS & Java Struts 导出 csv 文件答案

【问题标题】：EXTJS & Java Struts export csv fileEXTJS & Java Struts 导出 csv 文件
【发布时间】：2018-03-14 07:06:18
【问题描述】：

我想制作一个 csv 文件并让用户通过单击一个按钮来下载它。有一个搜索用户的表单（带有一些搜索字段）和按钮搜索：这是搜索用户并将其显示在网格中。表单后面有一个“导出到csv”的链接，这个要取表单字段的值，传给Java（struts），然后Java构造一个csv文件（和grid不一样，比较复杂，许多表中的许多值）并将其返回给extjs，之后，我想将其提供给用户，让他下载。 response.responseText 包含要导出的好 csv，但它太大而无法执行 encodeURI :(

我无法提议下载该文件。有人有什么想法吗？ :(

这是我现在做的源代码：

var params = Ext.getCmp("userSearchEngine").getForm().getValues(false);
Ext.Ajax.request({
    url : cmts.server + 'exportToCSV.do',
    method: 'POST',
    headers: { 'Content-Type': 'text/csv'},                    
    params : params,

    success: function ( response, request ) {
        console.log('success');
        console.log(response.responseText);
    },

    failure: function ( response, request ) {
        console.log('FAIL !');
    }
});

感谢您的帮助:)

编辑：Java 部分写入响应的输出流

编辑 2：由于一些限制，我无法在服务器端创建文件

【问题讨论】：

标签： java csv extjs export

【解决方案1】：

我使用这种方法：

一个 Ext.form.FieldContainer 作为链接。
服务器端（在我的例子中是 PHP）在 'tmp' 目录中生成文件。
服务器端返回有效的 JSON，其中包含生成文件的名称。
AJAX 请求更改 Ext.form.FieldContainer 的链接。

部分示例：

ExtJS 部分 - 字段容器：

{
id: 'generatecsv',
xtype: 'fieldcontainer',
width: 100,
layout: 'vbox',
items: [
    {xtype: 'displayfield', value: ''},
    {
    id: 'dds19_link_disk',
    xtype: 'box', 
    autoEl: {
        html: '<a href="./tmp/" target="_blank">Download CSV</a>',
        width: 100
    } 
    }
]   
}

ExtJS - AJAX 请求：

Ext.Ajax.request({
    method: 'POST', 
    url: './src/xxxxx.php',
    jsonData: Ext.JSON.encode({
    }),
    success: function(response){
        var r = Ext.JSON.decode(response.responseText);
        if (r.success == true) { 
            Ext.getCmp('generatecsv').el.update('<a href="./tmp/'+r.filename+'" target="_blank">ZIP архив</a>');
        } else {
            Ext.Msg.alert('Error', r.errmsg);       
        };
    },
    failure: function(response){
        Ext.Msg.alert('Error', 'Error.');       
    }
});

来自服务器的有效 JSON：

{
"success": true,
"filename": "generated_file_name.csv"
}

【讨论】：

您好，感谢您的帮助。由于一些限制，我无法在服务器端创建文件:(还有其他解决方案吗？
@Ryoku 可能可以使用 JSON 作为数组返回文件内容，每行一行，然后在 Ext.Ajax.Request 中迭代这个数组。但是我还没有测试过:(。这不是下载方法。
- 使用服务器端控制器，其中 url 映射应该是您的文件名，例如：“y/generated_file_name.csv?parameters” 在服务器端将您的 csv 内容写入 response.getOutputStream()，例如：IOUtils.copy(theCSVInputStream , response.getOutputStream());
如果我做这样的事情：window.location.replace(cmts.server + 'exportToCSV.do')，它会下载 csv 文件（没有创建文件），但我不能像这样传递表格:(也许这些信息可以帮助你帮助我？这意味着，访问一个返回我在我的 ajax 成功函数中得到的响应的 url 将启动文件的下载（因为我猜是标题 http）
不能通过 ajax 下载文件。浏览器安全禁止它。您可以使用数据 URL，但您也提到了大小限制。但是，请记住，数据 url 的大小限制非常大。您可以将 Downloadify 库用于此类操作。但是我很伤心，即使这样的库也不能使用 ajax

【解决方案2】：

对于下载文件，您可以尝试表单提交

var form = Ext.create('Ext.form.Panel', {
  standardSubmit : true,
  url : url,
  method : 'POST' // OR 'GET'
});

form.submit({
  target : '_blank',
  params : {

  }
});

在服务器端 - java：

response.setContentType("application/vnd.ms-excel");
response.addHeader("Content-Disposition",
    "attachment; filename=" + URLEncoder.encode(fileName)
        + ".csv");

IOUtils.copy(theCSVInputStream, response.getOutputStream())

【讨论】：