javascript - 使用 ASP.Net MVC Web Api 将 JSON 数据导出到 Excel 工作表

Question

我有一个使用 Durandal、ASP.net MVC Web API、Breeze 和 knockout js 构建的单页应用程序 (SPA)。

我需要将列表导出到 Excel 工作表，单击 html 页面上的按钮即可将其下载到下载文件夹。

虽然我已经通过在 javascript 中将 JSON 数据转换为 csv 格式(在客户端)成功地做到了这一点，但如果数据量很大(3000 + 行或可能约为 12000 行)，则需要花费太多时间。

我在通过 Breeze.js 进行的 Web API 调用将 excel 文件作为响应类型发送时遇到问题。

是否有一种方法可以更快地完成此操作，因为移动设备上也可能需要这样做？

编辑

下面是我编写的代码 -

用于绑定(bind)的 JavaScript 代码 -

function exportListToExcel() {                          
    DataContext.exportListToExcel().then(function (data) {
        //Do some stuff.                           
    });
}

在 Breeze 中实现的数据上下文文件中，代码返回 promise -

function exportListToExcel() {

    function querySucceeded() {
        //return data;
    }
    return util.sendRequest(config.baseApiPath + 'breeze/MyController/ExportListToExcel')
          .then(querySucceeded)
          .fail(queryFailed);
}

下面的代码是发送到 Web API 的请求。我不知道应该是HttpPost还是其他什么。

[HttpPost]
public HttpResponseMessage ExportListToExcel()
{
    return ExportListToExcel();
}

下面是后端代码 -

public static HttpResponseMessage ExportListToExcel()
{
    //Method which returns table data. This is working fine though.
    object listObject = GetListData();
    Table listData = (Table)listObject;            
    string attachment = "attachment; filename=Report.xlsx";
    HttpResponseMessage File = new HttpResponseMessage(HttpStatusCode.OK);
    System.Web.HttpContext.Current.Response.ClearContent();
    System.Web.HttpContext.Current.Response.AddHeader("content-disposition", attachment);
    System.Web.HttpContext.Current.Response.ContentType = "application/vnd.ms-excel";

        StringBuilder str = new StringBuilder();
        str.Append("<table border=`" + "1px" + "`b>");
        str.Append("<tr>");
        foreach (DataColumn dc in listData.Columns)
        {                
            str.Append("<td><b><font face=Arial Narrow size=3>" + dc.ColumnName + "</font></b></td>");                
        }

        str.Append("</tr>");
        foreach (DataRow dr in listData.Rows)
        {
            str.Append("<tr>");                              

            for (int i = 0; i < listData.Columns.Count; i++)
            {
                str.Append("<td><font face=Arial Narrow size=" + "14px" + ">" + dr[i].ToString() + "</font></td>");
            }

            str.Append("</tr>");
        }
        str.Append("</table>");


        byte[] temp = System.Text.Encoding.UTF8.GetBytes(str.ToString());

        //To write the table to the File content.
        File.Content = new StringContent(temp.ToString());

        return File;                                             
    }

但这不起作用，并且在数据上下文文件中，执行了 queryFailed() 方法。

我不知道我哪里出了问题，也不知道我错过了什么。另外，让我知道如何处理 promise 返回的文件/数据会有很大帮助。

Answer 1

我的直觉是，BreezeJS 不适合这项特定的工作……我是作为 BreezeJS 的合著者这么说的。

问题始于范式。我无法将电子表格行视为通常意义上的业务对象的“实体”。对我来说，它们看起来更像是简单的数据。

在这个例子中，我们离实体思维还很远。您似乎正在准备一大块 HTML 以在客户端上显示。这与“实体”无关。

我对你的意图没有异议。但我认为您应该像对待任何其他原始资源(例如图像)一样对待它，并使用您可用的任何组件通过简单的 AJAX 来获取它。

您可能正在构建一个混合应用程序，其中既有原始数据(或 HTML)又有实体模型。只要应用得当，Breeze 就是一个很好的应用程序工具。您的 Breeze 应用程序已委托(delegate)给低级别 AJAX 组件(例如，jQuery.ajax 或 Angular 的 $http)，您应该能够在代码库中找到该组件并直接将其用于此特定的 csv 任务。