Question

我有一个包含网格和按钮的应用程序，用户可以将网格导出到Excel。我希望能够在服务器响应excel文件时显示“另存为”对话框。服务器将参数作为JSON对象接受。这是我的代码： -

Ext.Ajax.request({
   url: '/export/excel/',
   method: 'POST',
   //Send the query as the message body
   jsonData: jsonStr,
   success: function (result,request) {
        Ext.DomHelper.append(document.body, {
           tag: 'iframe',
            frameBorder: 0,
            width: 0,
            height: 0,
            //src:result,
            css: 'display:none;visibility:hidden;height:1px;'
        });
    }, //success
    failure: function (response, opts) {
        var msg = 'server-side failure with status code: ' + response.status + ' message: ' + response.statusText;
        Ext.Msg.alert('Error Message', msg);
    }
});

我知道有一个类似的问题（ExtJS AJAX save as dialog box），但它引用了服务器上的静态文件。在我的情况下，根据发送的json，结果每次都会有所不同。我在result.responseText中找回了我想要的整个excel文件。需要做什么才能弹出对话框，要求用户保存为选项？另外，我不确定如何配置domhelper中的src。任何帮助都会非常感激。

Answer 1

我认为以完全客户端无关的方式执行此操作的唯一方法是使用Content-Type：octect-stream和内容 - 使用建议的文件名处理'attachment'来从服务器端强制执行此操作。参见：

http://www.w3.org/Protocols/rfc2616/rfc2616-sec19.html#sec19.5.1

和

http://www.ryboe.com/tutorials/php-headers-force-download

您也可以使用所谓的“dataURIs”，但他们有一系列问题：

http://en.wikipedia.org/wiki/Data_URI_scheme

我的建议是在服务器上动态返回EXCEL内容，只需使按钮成为指向您正在使用的当前数据的URL的链接，并设置正确的响应标头以触发浏览器下载文件。由于您正在进行AJAX调用而不让Web浏览器直接获取URL，因此您设置的任何HTTP头控制浏览器解释内容的方式都无关紧要，因为您在JS中而不是在用户的浏览器中执行此操作。通过服务器上的链接将内容直接返回给用户，您将解决此问题。

由于您实际上希望用户点击该链接，因此我认为AJAX不合适。

Answer 2

我让服务器端返回创建和保存文件的位置的路径，而不是将文件作为附件发送到响应中，从而避免了在响应中设置标头的问题。然后我只是将代码中的iframe源设置为响应中返回的路径（result.responseText）。

在Ext Js中使用AJAX请求生成另存为对话框

2 个答案: