Question

我的MVC应用程序中有一个C＃functoin，它返回一个csv文件的JSON表示。我试图在javascript中捕获它并打开文件。基本上我希望浏览器做它的事情，并让用户决定是否要打开它，保存或取消。我无法让弹出窗口让我打开文件。以下是功能

C＃功能

[HttpPost]
public ActionResult ExportToCsv(string fileContents, string fileName)
{
    fileContents = fileContents.Replace("-CARRIAGE-", "\r\n");
    return Json(new { url = File(Encoding.UTF8.GetBytes(fileContents), "text/csv", fileName) }); ;
}

这是我正在对函数进行ajax调用的javascript

$("#btnExport").click(function (event) {
    event.preventDefault();
    var csv = table2csv(noteTypeTable, "full", "Table.dataTable", "noteTypes");
    $.ajax({
        url: "/Admin/Admin/ExportToCsv/?fileContents=" + csv + "&fileName=NoteTypes.csv",
        type: 'Post',
        success: function (result) {
            window.open(result.url);
        }
    });
});

我知道我错过了什么。有人可以帮忙。

修改

在阅读了所有可能的答案和评论之后，这就是我想要实现的目标。因此，如果我的代码完全错误，请告诉我。

我有一个网格，我有一个导出到excel按钮。我有一个方法将我想要的数据转换为javascript本身的逗号分隔文本。我需要将此作为可下载的csv文件提供给用户。为此，我使用控制器方法创建了File对象。之前的化身是一种Get方法，由于查询字符串的长度限制，我遇到了限制。所以我尝试将其转换为POST方法，但它无效。

这是适用于少量数据的以前版本的代码

的Javascript

   $("#btnExport").click(function (event) {
            event.preventDefault();
            var csv = table2csv(noteTypeTable, "full", "Table.dataTable", "noteTypes");
            window.location.href = "/Admin/Admin/ExportToCsv/?fileContents=" + csv + "&fileName=NoteTypes.csv";
        });

C＃功能

    [HttpGet]
    public ActionResult ExportToCsv(string fileContents, string fileName)
    {
        fileContents = fileContents.Replace("-CARRIAGE-", "\r\n");
        return File(Encoding.UTF8.GetBytes(fileContents), "text/csv", fileName);
    }

希望现在能为您提供更多背景信息。基本上我需要将我的GET方法转换为POST方法并从Javascript中使用它。

Answer 1

您无法使用ajax保存二进制文件 - 由于安全原因，它受到限制。如果您希望用户保存文件 - 当您以JSON格式发回数据时（例如，如果用户想要保存数据），则从控制器返回二进制流。

我在这里做了类似的事情：How to properly create and download a dynamically generated binary *.xlsx file on .net MVC4?

Answer 2

可能将其另存为json文件并加载到当前页面的DOM中。虽然我感到很困惑，但是你不是只有一个包含CSV文件URL的JSON响应，这只是一个CSV文件，而不是CSV的JSON表示吗？

$("#btnExport").click(function (event) {
        event.preventDefault();
        var csv = table2csv(noteTypeTable, "full", "Table.dataTable", "noteTypes");
        $.ajax({
            url: "/Admin/Admin/ExportToCsv/?fileContents=" + csv + "&fileName=NoteTypes.json",
            type: 'Post',
            success: function (result) {
                var myDummyElement = $('<div>'); //dummy div so you can call load
                myDummyElement .load('result.url #myJson');
            }
        });
    });

<div id="myJson"></div>

[HttpPost]
    public ActionResult ExportToCsv(string fileContents, string fileName)
    {
        //change fileName to be a .json extension
        fileContents = fileContents.Replace("-CARRIAGE-", "\r\n");
        return Json(new { url = File(Encoding.UTF8.GetBytes(fileContents), "text/csv", fileName) }); ;
    }

Answer 3

如果您使用ajax，则需要在代码中处理结果。但是你不能以这种方式直接触发文件下载。

相反，创建一个（隐藏的）form并将其发布到（隐藏）iframe（通过向iframe提供name并将其指定为{{ 1 {} target}，确保响应指定标题form。这将触发浏览器提供保存文件。（可选）在标题中，您可以通过向标头值添加Content-Disposition: attachment来建议文件的文件名。例如。 ; filename="fname.ext"。

客户端看起来像这样：

Content-Disposition: attachment; filename="fname.ext"

服务器端只是带有$("#btnExport").click(function (event) { event.preventDefault(); var csv = table2csv(noteTypeTable, "full", "Table.dataTable", "noteTypes"); var frame = $('iframe[name="formreceiver"]'); if (!frame.length) { frame = $('<iframe name="formreceiver"></iframe>').appendTo(document.body).css("display", "none"); } var form = $("#senderform"); if (!form.length) { form = $('<form id="senderform"></form>').appendTo(document.body); } form = form[0]; // Raw DOM element rather than jQuery wrapper form.target = "formreceiver"; form.action = "/Admin/Admin/ExportToCsv/?fileContents=" + csv + "&fileName=NoteTypes.csv"; form.method = "POST"; form.submit(); });标题的标准表单响应。

我已经使用这种技术多年了，从IE6开始使用浏览器。我通常的设置已经在标记中有Content-Disposition（而不是像上面那样创建它），但除此之外，这基本上就是我所做的。

请注意，为了响应用户点击按钮，您执行此操作非常重要。如果你不是，那就会出现弹出窗口阻塞问题。

从javascript打开JSON文件

3 个答案: