Kendo ui 剑道网格数据导出到excel文件

我已经配置了剑道网格，并配置了所有的表格行和标题。当我单击“导出”按钮时，它正在生成一个excel文件。但是问题发生在哪里，我不知道我在中所做的配置 IE在那里没有生成文件，而是在URL中显示数据格式，其中包含

数据：application/vnd.ms excel，OrderIDFreight…..

   var grid = $("#grid").kendoGrid({
        dataSource: {
            type           : "odata",
            transport      : {
                read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
            },
            schema         : {
                model: {
                    fields: {
                        OrderID  : { type: "number" },
                        Freight  : { type: "number" },
                        ShipName : { type: "string" },
                        OrderDate: { type: "date" },
                        ShipCity : { type: "string" }
                    }
                }
            },
            pageSize       : 10
        },
        filterable: true,
        sortable  : true,
        pageable  : true,
        columns   : [
            {
                field     : "OrderID",
                filterable: false
            },
            "Freight",
            {
                field : "OrderDate",
                title : "Order Date",
                width : 100,
                format: "{0:MM/dd/yyyy}"
            },
            {
                field: "ShipName",
                title: "Ship Name",
                width: 200
            },
            {
                field: "ShipCity",
                title: "Ship City"
            }
        ]
    }).data("kendoGrid");

单击按钮将网格数据导出到Excel

$("#btnExport").click(function(e) {

 var dataSource =  $("#grid").data("kendoGrid").dataSource; 
     var filteredDataSource = new kendo.data.DataSource( { 
         data: dataSource.data(), 
         filter: dataSource.filter() 
     }); 

 filteredDataSource.read();
 var data = filteredDataSource.view();

 var result = "data:application/vnd.ms-excel,";

 result += "<table><tr><th>OrderID</th><th>Freight</th><th>Order Date</th><th>Ship Name</th><th>Ship City</th></tr>";

 for (var i = 0; i < data.length; i++) {
     result += "<tr>";

     result += "<td>";
     result += data[i].OrderID;
     result += "</td>";

     result += "<td>";
     result += data[i].Freight;
     result += "</td>";

     result += "<td>";
     result += kendo.format("{0:MM/dd/yyyy}", data[i].OrderDate);
     result += "</td>";

     result += "<td>";
     result += data[i].ShipName;
     result += "</td>";

     result += "<td>";
     result += data[i].ShipCity;
     result += "</td>";

     result += "</tr>";
 }

 result += "</table>";
 if (window.navigator.msSaveBlob) {
        window.navigator.msSaveBlob(new Blob([result]),'export.xls');
    } else {
        window.open(result);
    }


 e.preventDefault();
});

$（“#btnExport”）。单击（函数（e）{
var数据源=$（“#网格”）.data（“kendoGrid”）.dataSource；
var filteredDataSource=新的kendo.data.DataSource（{
数据：dataSource.data（），
筛选器：dataSource.filter（）
}); 
filteredatasource.read（）；
var data=filteredatasource.view（）；
var result=“数据：应用程序/vnd.ms excel”；
结果+=“OrderIDFreightOrder日期装运名称城市”；
对于（变量i=0；i

试试这个

将其置于

result+=”之后并且它在所有浏览器中都工作

if (window.navigator.msSaveBlob) {
                window.navigator.msSaveBlob(new Blob([result]), 'exporteddata' + postfix + 'export.csv');
            }
            else if (window.webkitURL != null) {
                // Chrome allows the link to be clicked programmatically.
                var a = document.createElement('a');
                var table_div = (document.getElementById('grid').getElementsByTagName('tbody')[0]);
                var table_html = table_div.innerHTML.replace();
                a.href = result;
                a.download = 'exporteddata' + postfix + 'export.csv';
                a.click();
            }
            else {
                window.open(result);
            }

如果您想将数据导出到CSV（可在Excel中打开），我已经编写了一些代码，可以在github上实现，因为我用kendo grid和jquery javascript tablet库制作了一个Frankenstein。支持导出到csv、excel、pdf。以下是我的解决方案：

添加数据表库和css

@导入“media/css/demo_page.css”；
@导入“media/css/jquery.dataTables\u themeroller.css”；
@导入“extras/TableTools/media/css/TableTools.css”；
@导入“extras/TableTools/media/css/TableTools_JUI.css”；

在你的.js中
$（“#btnExport”）。单击（函数（e）{
//从剑道网格获取数据并应用过滤器
var dataSource=$（“#你的kendoGrid”）.data（“kendoGrid”）.dataSource；
var filters=dataSource.filter（）；
var allData=dataSource.data（）；
var query=new kendo.data.query（allData）；
var data=query.filter（filters.data）；
//设置列标题
var result=“Col 1Col 2Col 3Col 4”；
结果+=”；
//添加行
对于（变量i=0；i

你明白了吗
Hai Jai，这是一个令人厌倦的示例，我将您给出的代码放在IE中，但仍然在IE中得到相同的错误，因为它在IE中生成文件。但生成的文件包含此数据
data:application/vnd.ms-excel，OrderIDFreight….
IE版本10。是否有其他方法来纠正此问题。请尝试此方法
            <script src="media/js/jquery.dataTables.min.js"></script>
    <script src="extras/TableTools/media/js/TableTools.min.js"></script>
    <style type="text/css" title="currentStyle">
            @import "media/css/demo_page.css";
            @import "media/css/jquery.dataTables_themeroller.css";
            @import "extras/TableTools/media/css/TableTools.css";
            @import "extras/TableTools/media/css/TableTools_JUI.css";
    </style>

    $("#btnExport").click(function (e) {
    //Get your data from kendo grid and apply filters
    var dataSource = $("#yourKendoGrid").data("kendoGrid").dataSource;
    var filters = dataSource.filter();
    var allData = dataSource.data();
    var query = new kendo.data.Query(allData);
    var data = query.filter(filters).data;
    //Set your column headers
    var result = "<table  id='ExportedTable'><thead><tr><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col 4</th></thead></tr>";

    result += "<tbody>";
    //Adding rows
    for (var i = 0; i < data.length; i++) {
        result += "<tr>";

        result += "<td>";
        result += kendo.format("{0:MM/dd/yyyy}", data[i].Date1);
        result += "</td>";

        result += "<td>";
        result += kendo.format("{0:MM/dd/yyyy}", data[i].Date2);
        result += "</td>";

        result += "<td>";
        result += data[i].Fiel3;
        result += "</td>";

        result += "<td>";
        result += data[i].Field4;
        result += "</td>";

        result += "</tr>";
    }

    result += "</tbody>";
    result += "</table>";
    //Append your grid to your div or element. 
    $("#GridToExport").empty().append(result);
    //Initialize dataTable, to get the export functionality
    $("#ExportedTable").dataTable(
        {
            "sDom": 'T<"clear"><"H"lfr>t<"F"ip>',
            "oTableTools": {
                "sSwfPath": "extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
            },
        }
     );
    //Hide your table if you want to have only kendo grid
    $("#ExportedTable").hide();
    //Hide the info panel and paginate controls from datatable component
    $("[class*='dataTables_info']").hide();
    $("[class*='dataTables_paginate']").hide();
    $("[class*='dataTables_filter']").hide();
    $("[class*='dataTables_length']").hide();

    e.preventDefault();
});