Question

我刚刚将我的MVC视图导出到Excel工作得很好，但是，因为我正在设置location.href这会让我看到一个充满CSV数据的页面而不是用户点击EXPORT按钮之前的整齐网格结果。

我正在考虑如何更改以下脚本以执行其操作，但只留下页面。我尝试再次调用搜索以再次返回服务器，但是在运行时用户暂时看到网页上的CSV，这是不好的。

任何想法都非常感激，干杯

    $(function() {
        $('#exportButton').click(function() {
            var url = $('#AbsolutePath').val() + 'Waste.mvc/Export';

            var data = {
                searchText: $('#SearchTextBox').val().toString(),
                searchTextSite: $('#SearchTextBoxSite').val().toString(),
                StartDate: $('#StartDate').val(),
                EndDate: $('#EndDate').val()
            };
            $('#ResultsList').load(url, data, function() {
                $('#LoadingGif').empty();
                location.href = url + "?searchText=" + data.searchText + "&searchTextSite=" + data.searchTextSite + "&StartDate=" + data.StartDate + "&EndDate=" + data.EndDate;
            });
            //Search(); this fixes because grid is displayed again after csv results
        });
    });

我的控制器代码：

    public FileStreamResult Export(string searchText, string searchTextSite, string StartDate, string EndDate)
    {

        var searchResults = getSearchResults(searchText, searchTextSite, StartDate, EndDate);
        HttpContext.Response.AddHeader("content-disposition", "attachment; filename=Export.csv");

        var sw = new StreamWriter(new MemoryStream());

        sw.WriteLine("\"Ref\",\"Source\",\"Collected\"");
        foreach (var line in searchResults.ToList())
        {
            sw.WriteLine(string.Format("\"{0}\",\"{1}\",\"{2}\"",
                                       line.WasteId,
                                       line.SourceWasteTypeId.ToDescription(),
                                       line.CollectedDate.ToShortDateString()));
        }
        sw.Flush();
        sw.BaseStream.Seek(0, SeekOrigin.Begin);

        return new FileStreamResult(sw.BaseStream, "text/csv");
        // return File(sw.BaseStream, "text/csv", "report.csv"); Renders the same result

    }

Answer 1

您可以让控制器操作将CSV文件作为附件返回（它将使用Content-Disposition: attachment; filename=report.csv HTTP标头）：

public ActionResult GetCsv()
{
    byte[] csvData = ...
    return File(csvData, "text/csv", "report.csv");
}

现在您可以安全地执行window.location.href = '/reports/getcsv';，系统将提示用户下载CSV报告，但它将保留在同一页面上。

Answer 2

感谢您的指导，它帮助我到那儿。我设置了一个隐藏可见性的DIV：

<div id="ExportList" style="visibility:hidden;clear:both;">                       
</div>

我将这个隐藏的div放在具有网格结果的DIV下面，网格结果保持不变，隐藏的CSV流写入页面并弹出提示然后打开Excel

这是我完成的Javascipt，我认为这可能更整洁。不必使用额外的DIV，但它不是太糟糕：

    $(function() {
        $('#exportButton').click(function() {
            var url = $('#AbsolutePath').val() + 'Waste.mvc/Export';

            var data = {
                searchText: $('#SearchTextBox').val().toString(),
                searchTextSite: $('#SearchTextBoxSite').val().toString(),
                StartDate: $('#StartDate').val(),
                EndDate: $('#EndDate').val()
            };
            $('#ExportList').load(url, data, function() {
                $('#LoadingGif').empty();
                location.href = url + "?searchText=" + data.searchText + "&searchTextSite=" + data.searchTextSite + "&StartDate=" + data.StartDate + "&EndDate=" + data.EndDate;
            });

        });
    });

从MVC Controller导出到CSV，View在页面上显示CSV原始数据

2 个答案: