从 javascript 打开一个 JSON 文件

Opening a JSON file from javascript

本文关键字：一个 JSON 文件 javascript      更新时间：2023-09-26

我的MVC应用程序中有一个C#函数，它返回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 方法，但它不起作用。

这是适用于较小数据量的先前版本的代码

爪哇语

   $("#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使用它。

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

相反，创建一个（隐藏的）form并将其发布到（隐藏的）iframe（通过给iframe一个name并将其指定为form的target），确保响应指定标头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();
});

服务器端只是带有 Content-Disposition 标头的标准表单响应。

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

请注意，执行此操作以响应用户的按钮单击非常重要。如果您不是，就会出现弹出窗口阻止程序问题。

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

我在这里做了类似的事情：如何在 .net MVC4 上正确创建和下载动态生成的二进制 *.xlsx 文件？

也许将其另存为 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) }); ;
    }
相关文章：