Kendo网格数据导出到Excel文件

2024-02-15

我已经配置了剑道网格并配置了所有表格行和标题。当我单击导出按钮时,它会生成一个 excel 文件。但是问题发生在哪里,我不知道我在中所做的相同配置 IE 没有生成文件,而是显示 URL 中的数据格式data:application/vnd.ms-excel,<table><tr><th>OrderID</th><th>Freight</th>.....

   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();
});

尝试这个,

把这个放在后面result += "</table>";它适用于所有浏览器。

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);
            }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Kendo网格数据导出到Excel文件 的相关文章

  • 如何通过按钮选择或不选择剑道网格

    我有一个网格 在网格定义中启用了选择模式 selectable true 我需要通过按钮使网格不可选择 我尝试了这个 但它不起作用 disableKendoGrid click function var grid myGrid data k
  • Kendo Grid 导出到 Excel 时出错“无法读取 jQuery.js 文件中未定义的属性‘长度’”

    我正在尝试将剑道网格导出到 Excel 然后我在控制台中出现错误 如果有人知道的话请帮助我 提前致谢 angular js 13920 TypeError Cannot read property length of undefined a
  • Kendo Grid:如何在一个单元格中显示 List

    我尝试迭代列表并将所有元素显示到列中的单元格中 但我无法使其正常工作 这是我到目前为止所拥有的 在网格定义中 columns Bound x gt x locationList Title Locations Included Client
  • 使用 Knockout-Kendo.js 动态启用/禁用 kendo 日期选择器

    我正在尝试使用 Knockout Kendo js 根据选择的选定值启用 禁用 kendo 日期选择器 HTML
  • 特定组件的自定义样式应用于 Angular 6 中的所有组件

    ui 网格 我试图将自定义样式应用于特定组件 我想更改该特定组件的字体大小 但是当我在该特定组件 css 文件中编写 css 代码时 并且在加载该组件后 该样式将应用到所有其他组件也 以下是css文件中的代码 k grid td font
  • 如何从 Kendo 网格中删除所有行

    我在用Kendo grid 我想从中删除所有行Kendo grid using JavaScript 我使用 for 循环删除了它们 但我想找到删除所有行的最佳方法 尝试按照代码进行操作 var grid Grid data kendoGr
  • Kendo UI 树视图父节点不带复选框

    什么方法可以实现显示带有复选框的 TreeView 但我不需要父节点的复选框 仅适用于没有子项的 项目 即 我正在显示文件夹结构 但不希望仅针对文件为任何文件夹设置复选框 Thanks 你应该使用使用复选框模板 http docs kend
  • Kendo Ui 数据源添加功能无法正常工作

    我定义了一个 Kendo 数据源 如下所示 它正在填充 ListView 中的值 var datasourceAppList new kendo data DataSource transport create function optio
  • kendo ui 取消树视图放置

    我有一个 TreeView 一旦用户将项目放到所需的位置 它会显示一个对话框并要求确认 如果用户选择取消 我还如何取消项目的放置 以便它返回到其原始位置 我当前的代码如下但不起作用 var newDiv document createEle
  • Kendo Grid - 它自己的加载指示器

    Kendo grid在网格加载 分页 排序时自动提供自己的Loading指示器 它运行良好 但我不希望显示 隐藏这个内置加载指示器 如何禁用此功能 请建议我 谢谢 维诺斯 很简单 用CSS隐藏就可以了 您的选择器需要比内置 Kendo 类更
  • 在 Kendo 网格读取操作中发送附加参数

    我有一个剑道网格 如下所示 Html Kendo Grid
  • Kendo mvc grid 内联编辑模式 DateTimePicker 模板给出错误

    我正在使用 Kendo UI mvc 网格来列出数据 我正在这个网格中进行内联编辑 我使用 EditorTemplate 作为日期时间字段 这样它将在内联编辑模式下为日期时间字段提供日期时间选择器 当我要单击 更新 按钮时 它会给我这样的验
  • Kendo UI 数据源 - 过滤相关数据

    我在过滤相关数据 多对多 的剑道数据源时遇到问题 我正在使用 ASP NET WebAPI2 和 DataSourceRequest 来捕获服务器上的请求 然后使用 IQueryable 上的 ToDataSourceResult 扩展方法
  • 如何更改 Kendo 警报标题?

    我正在使用 Kendo 警报并想更改其标题 默认标题是 url 名称 请参阅下面的链接 图片 我想使用自己的标题 如何更改 图像剑道警报 https i stack imgur com AscDa png 剑道警报 kendo alert
  • 获取剑道网格中的点击事件

    我正在尝试获取 Kendo Grid 的单击事件 以便我可以将内容绑定到 Shift 和 Ctrl 单击 我无法使用 Kendo 提供的固有多选功能 因为它不支持拖放 当我在 dataBound 事件之后创建函数时 我的函数会在单击时被调用
  • 在剑道网格中显示动态图像

    我想在剑道网格中填充动态图像 我正在获取 json 数据 我有以下代码 var grid timeSegmentGrid kendoGrid var icon dataSource transport read function optio
  • 根据列值将剑道网格中的行变灰

    我有一个 Kendo 网格 其值根据调用后填充 如果其中一列的值为 已注册 我需要将整行灰显 我们有办法实现这一目标吗 添加一个处理函数onDataBound 事件 http demos telerik com kendo ui grid
  • Kendo Ui MVC EditorTemplateName 在 PopUp 编辑模式下不起作用

    我想在 Kendo Ui 网格中使用 EditorTemplateName 作为外键列 当网格编辑模式为内联时 一切正常并且我的模板已加载 但是当将模式更改为弹出时不加载模板 如何修复它 Html Kendo Grid
  • document.execCommand('copy') 有大小限制吗?

    我使用的 document execCommand copy 与此处描述的类似 https developers google com web updates 2015 04 cut and copy commands https deve
  • Kendo UI 网格过滤器日期格式

    在我的剑道网格中 我想更改过滤器中的日期格式 例如 2015年1月30日至2015年1月30日 我已经更改了开始日期的日期格式 field StartDate title Start Date width 30 format 0 MMM d

随机推荐