在 Ext Js 中生成带有 AJAX 请求的另存为对话框答案

【问题标题】：Generate save as dialog box with AJAX request in Ext Js在 Ext Js 中生成带有 AJAX 请求的另存为对话框
【发布时间】：2012-05-02 14:51:03
【问题描述】：

我有一个包含网格和按钮的应用程序，用户可以将网格导出到 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。任何帮助将不胜感激。

【问题讨论】：

标签： ajax json extjs4 export

【解决方案1】：

我相信以完全与客户端无关的方式执行此操作的唯一方法是使用以下内容从服务器端强制它：八进制流和“附件”的 Content-Disposition 以及建议的文件名。见：

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

和

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

您也可以使用所谓的“dataURI”，但它们有自己的一组问题：

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

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

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

【讨论】：

服务器端已经工作正常并返回我想要的带有你提到的确切标题的 excel 文件，它只是我想要的对话框。我如何能够发布 JSON 数据从按钮，因为内容类型需要'application/json'?
JSON 也内置在导出按钮的事件处理程序中，这也是我在问题中发布的代码所在的位置。每次单击导出按钮时都需要构建 JSON 数据，因为有两个选项卡面板，每个面板都包含网格，并且基于活动选项卡，json 会使用为首先构建该网格而选择的某些参数构建。
如果我理解正确，您需要从特定网格组件的存储中提取数据，然后以 JSON 格式发布以获取八位字节流或您拥有的响应。因此，对于第一部分，使用 Ext.Store.getRange 将模型对象的实例交还给您，并使用您的传出 Ajax 请求的 params 选项将这些 recs 设置为您的请求 JSON 中的参数。另见：stackoverflow.com/questions/2526764/… 和 stackoverflow.com/questions/2917581/…
+1 感谢您的帮助，我采用了稍微不同的方法并在服务器端进行了更改。我没有将文件作为附件返回，而是发回了路径并将其用作 iframe 的来源。

【解决方案2】：

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

【讨论】：

这对我帮助很大，谢谢。我遇到了 Content-Disposition 的问题