asp.net-mvc - 使用 Kendo Grid 自动导出到 Excel

Question

我有一个 asp.net MVC5 项目，我在其中使用 Kendo Grid 来显示表格数据并为用户提供 Export-to-Excel 功能。这些数据集的列数相对较小。例如大多是 3-6 列。但是，我有一些持怀疑态度的用户希望能够看到为某些 Kendo 图表提供数据的数据，其中数据集大于我希望放置在 View /浏览器中的网格中。

我的问题是，有没有人想出一种方法来利用作为网格一部分的“导出到 Excel”功能而不显示网格。我喜欢“导出”具有将数据推送到 Excel 的所有附加功能，所以我想知道这是否可行，而不是将我自己的输出滚动到可由 Excel 打开的 csv 文件。

想知道是否有办法直接从 Controller 中使用 Export-to-Excel 功能，以便在 Excel 中将数据返回给用户？

这是 Telerik 的一个例子；

查看网格小部件

<script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()    
.Name("grid")    
.HtmlAttributes( new { style = "width: 900px" } )
.Columns(columns => {
    columns.Bound(p => p.ProductName).Width(300).Locked()
           .ClientFooterTemplate("Total Count: #=count#")
           .ClientGroupFooterTemplate("Count: #=count#");
    columns.Bound(p => p.UnitPrice).Width(300);
    columns.Bound(p => p.UnitsOnOrder).Width(300)
           .ClientFooterTemplate("Average: #=average#")
           .ClientGroupFooterTemplate("Average: #=average#");
    columns.Bound(p => p.UnitsInStock).Width(300)
           .ClientFooterTemplate("Min: #= min # Max: #= max #")
           .ClientGroupHeaderTemplate("Units In Stock: #= value # (Count: #= count#)");
})
.ToolBar(tools => tools.Excel())
.Pageable()
.Sortable()
.Scrollable()
.Groupable()
.Excel(excel => excel
    .FileName("Kendo UI Grid Export.xlsx")
    .Filterable(true)
    .ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
)
.Reorderable(r => r.Columns(true))
.Resizable(r => r.Columns(true))
.ColumnMenu()
.DataSource(dataSource => dataSource
    .Ajax()                 
    .PageSize(7)
    .Group(g => g.Add(p => p.UnitsInStock))
    .Aggregates(aggregates =>
    {
         aggregates.Add(p => p.UnitsInStock).Min().Max().Count();
            aggregates.Add(p => p.UnitsOnOrder).Average();
            aggregates.Add(p => p.ProductName).Count();
            aggregates.Add(p => p.UnitPrice).Sum();
    })
    .Read(read => read.Action("Excel_Export_Read", "Grid"))
)
)

Controller

using System.Collections.Generic;
using System.Web.Mvc;
using Kendo.Mvc.Examples.Models;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using System.Linq;
using System;

namespace Kendo.Mvc.Examples.Controllers
{
public partial class GridController : Controller
{
    public ActionResult Excel_Export()
    {
        return View();
    }

    public ActionResult Excel_Export_Read([DataSourceRequest]DataSourceRequest request)
    {
        return Json(productService.Read().ToDataSourceResult(request));
    }

    [HttpPost]
    public ActionResult Excel_Export_Save(string contentType, string base64, string fileName)
    {
        var fileContents = Convert.FromBase64String(base64);

        return File(fileContents, contentType, fileName);
    }
}
}

服务

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;

namespace Kendo.Mvc.Examples.Models
{
public class ProductService : IDisposable
{
    private SampleEntities entities;

    public ProductService(SampleEntities entities)
    {
        this.entities = entities;
    }

    public IEnumerable<ProductViewModel> Read()
    {
        return entities.Products.Select(product => new ProductViewModel
        {
             ProductID = product.ProductID,
             ProductName = product.ProductName,
             UnitPrice = product.UnitPrice.HasValue ? product.UnitPrice.Value : default(decimal),
             UnitsInStock = product.UnitsInStock.HasValue ? product.UnitsInStock.Value : default(short),
             QuantityPerUnit = product.QuantityPerUnit,
             Discontinued = product.Discontinued,
             UnitsOnOrder = product.UnitsOnOrder.HasValue ? (int)product.UnitsOnOrder.Value : default(int),
             CategoryID = product.CategoryID,
             Category = new CategoryViewModel()
             {
                 CategoryID = product.Category.CategoryID,
                 CategoryName = product.Category.CategoryName
             },
             LastSupply = DateTime.Today
        });
    }

    public void Create(ProductViewModel product)
    {
        var entity = new Product();

        entity.ProductName = product.ProductName;
        entity.UnitPrice = product.UnitPrice;
        entity.UnitsInStock = (short)product.UnitsInStock;
        entity.Discontinued = product.Discontinued;
        entity.CategoryID = product.CategoryID;

        if (entity.CategoryID == null)
        {
            entity.CategoryID = 1;
        }

        if (product.Category != null)
        {
            entity.CategoryID = product.Category.CategoryID;
        }

        entities.Products.Add(entity);
        entities.SaveChanges();

        product.ProductID = entity.ProductID;
    }

    public void Update(ProductViewModel product)
    {
        var entity = new Product();

        entity.ProductID = product.ProductID;
        entity.ProductName = product.ProductName;
        entity.UnitPrice = product.UnitPrice;
        entity.UnitsInStock = (short)product.UnitsInStock;
        entity.Discontinued = product.Discontinued;
        entity.CategoryID = product.CategoryID;

        if (product.Category != null)
        {
            entity.CategoryID = product.Category.CategoryID;
        }

        entities.Products.Attach(entity);
        entities.Entry(entity).State = EntityState.Modified;
        entities.SaveChanges();
    }

    public void Destroy(ProductViewModel product)
    {
        var entity = new Product();

        entity.ProductID = product.ProductID;

        entities.Products.Attach(entity);

        entities.Products.Remove(entity);

        var orderDetails = entities.Order_Details.Where(pd => pd.ProductID == entity.ProductID);

        foreach (var orderDetail in orderDetails)
        {
            entities.Order_Details.Remove(orderDetail);
        }

        entities.SaveChanges();
    }

    public void Dispose()
    {
        entities.Dispose();
    }
}
}

链接: http://demos.telerik.com/aspnet-mvc/grid/excel-export

顺便说一句，这个“分类”是什么类型的架构？我喜欢它，并想阅读它。

Answer 1

如何隐藏网格并添加您自己的按钮(或类似按钮)来触发导出？

例如(使用引用的代码):

添加一个按钮(或在图表中添加一些类似的钩子(Hook))

  <button id="myexport">Export to Excel</button>

隐藏网格并附加处理程序:

$(document).ready(function () {
    $("#grid").hide();

    $("#myexport").click(function () {
        var grid = $("#grid").data("kendoGrid");
        grid.saveAsExcel();
    });
});