如何使用JQuery和ASP.NET MVC4返回要在单击按钮时下载的Excel文件

How to return a Excel file to be downloaded on button click using JQuery and ASP.NET MVC4

本文关键字:按钮 单击 下载 文件 Excel JQuery 何使用 ASP NET 返回 MVC4      更新时间:2023-09-26

我在控制器"MetasComisionsController"中有以下方法ExportarIntervalos

    [HttpPost]
    public ActionResult ExportarIntervalos()
    {
        var products = new System.Data.DataTable("teste");
        products.Columns.Add("col1", typeof(int));
        products.Columns.Add("col2", typeof(string));
        products.Rows.Add(1, "product 1");
        products.Rows.Add(2, "product 2");
        products.Rows.Add(3, "product 3");
        products.Rows.Add(4, "product 4");
        products.Rows.Add(5, "product 5");
        products.Rows.Add(6, "product 6");
        products.Rows.Add(7, "product 7");

        var grid = new GridView();
        grid.DataSource = products;
        grid.DataBind();
        Response.ClearContent();
        Response.Buffer = true;
        Response.AddHeader("content-disposition", "attachment; filename=MyExcelFile.xls");
        Response.ContentType = "application/ms-excel";
        Response.Charset = "";
        StringWriter sw = new StringWriter();
        HtmlTextWriter htw = new HtmlTextWriter(sw);
        grid.RenderControl(htw);
        Response.Output.Write(sw.ToString());
        Response.Flush();
        Response.End();
        return View("ExportacionExcel");
    }

我有以下javascript代码:

function btnExportar() {

    var r = confirm("Desea exportar todos los Intervalos de Comision ?");
    if (r == true) {
        //window.alert("Iniciar Exportacion");
        $.post("@Url.Action("ExportarIntervalos")",{},
            function (data) {
                alert("La EXPORTACION TERMINO");
                window.location = "/MetasComisiones/" + "ExportacionExcel";
            });

    } else {
        window.alert("Exportacion CANCELADA");
    }
}

从按钮点击事件调用

<button type="button" class="btn" name="btnExportar" onclick="btnExportar()">Exportar</button>

如何更改以前的任何组件或逻辑,使按钮btnExport返回必须作为响应的一部分下载的文件?我真的不需要重定向到一个新的位置

与其写入响应然后返回视图,不如简单地返回文件响应。通常情况下,对于实际的文件系统文件,或者至少对于流来说,这是微不足道的,但对于字符串来说也不难。

也许是这样的:

var fileContent = sw.ToString();
var fileBytes = Encoding.UTF8.GetBytes(fileContent);
var result = new FileContentResult(fileBytes, "application/ms-excel");
result.FileDownloadName = "MyExcelFile.xls";
return result;

这里的另一个好处是,通过删除对Response的引用并只返回一个结果,您也可以更有效地对该方法进行单元测试。


然而,的问题是客户端代码。除非最近有什么变化,否则AJAX不能用于下载文件。您可以下载数据(因为客户端回调函数中的data变量将包含响应),但据我所知,没有办法(除了ActiveX对象,您真的不想使用它)提示用户将该响应保存为文件。

然而,好消息是,文件响应不会在浏览器中卸载页面内容。因此,您实际上不需要使用AJAX本身,只需将用户引导到文件的请求即可。(或者,如果浏览器被配置为查看文件内容,而不是提示保存,则将用户引导到新的选项卡/窗口中。)

由于实际上没有数据发布,只需进行正常重定向:

window.location = '@Url.Action("ExportarIntervalos")';

(记住从控制器操作中删除[HttpPost]属性,因为这将是一个GET请求。如果需要使用POST,那么您可能想在页面上放置一个隐藏表单,然后在代码中调用该表单上的.submit()。)

<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

    $("#Xcel").click(function () {
        $("#Tab").table2excel({
            exclude: '.exclude',
            filename: 'MatchedSDNListNames.xls'
        });
    })

可用于直接导入表。