【问题标题】:Export to Excel automatically using Kendo Grid使用 Kendo Grid 自动导出到 Excel
【发布时间】:2016-03-18 14:29:43
【问题描述】:

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

我的问题是,有没有人想出一种方法来利用作为网格一部分的“导出到 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"))
)
)

控制器

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

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

【问题讨论】:

  • 嗯...没有人是吧?

标签: asp.net-mvc excel kendo-grid


【解决方案1】:

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

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

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

      <button id="myexport">Export to Excel</button>
    
  2. 隐藏网格并附加处理程序:

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

【讨论】:

  • 是的,这会起作用,但是页面加载时间是这个问题,因为它正在加载数千条记录。我怀疑上面的方法会很好用,但我仍然有页面加载时间,因为数据仍然隐藏在那里,对吧?
【解决方案2】:

您示例中的体系结构是 ASP.NET MVC。

另一种方法是在单击页面上的某些内容时使用 jQuery 触发查找,例如 &lt;div&gt;id="export"

$('#export').click(function (e) {
    $.ajax({
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        url: 'Grid/Excel_Export_Save',
        async: false,
        success: exportCSV,
    });
});

您可以编写自己的导出函数。我们有一种方法可以在这里导出为 CSV,如下所示:

function exportCSV(json) {
    var csv = 'Product ID,Name,Unit Price,Qty In Stock,Discontinued,Category ID\n';
    var download = 'products.csv';
    $.each(json.Data, function (index, rowArray) {
        var row = [];
        row.push(rowArray.ProductID);
        row.push(rowArray.ProductName);
        row.push(rowArray.UnitPrice);
        row.push(rowArray.UnitsInStock);
        row.push(rowArray.Discontinued);
        row.push(rowArray.CategoryID);
        csv += row.join(',') + '\r\n';
    });
    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
    hiddenElement.target = '_blank';
    hiddenElement.download = download;
    hiddenElement.click();
};

要调用它,您需要在控制器中创建一个允许 Json 请求的函数:

public async Task<JsonResult> GetGapReport([DataSourceRequest] DataSourceRequest request, String serviceType = null) {
    var result = new DataSourceResult();
    var products = new List<ProductViewModel>();
    try {
        var report = await productService.Read();
        products.AddRange(report.ToArray());
        result = products.ToDataSourceResult(request);
    } catch (Exception err) {
        result.Errors = err.Message;
    }
    return new JsonResult {
      Data = result, 
      JsonRequestBehavior = JsonRequestBehavior.AllowGet, 
      MaxJsonLength = Int32.MaxValue 
    };
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-26
    • 2018-07-23
    相关资源
    最近更新 更多