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文件 的相关文章

  • 在剑道网格中,我可以使用函数动态设置列属性吗?

    我这里有一些代码 我试图根据数据项的值设置单元格的背景颜色 http dojo telerik com solidus flux eHaMu http dojo telerik com solidus flux eHaMu
  • jquery中如何检查div是否获得焦点?

    我正在尝试在我的视图中使用剑道网格 我想在按 Enter 键后在网格中创建新行 我可以通过编写以下代码来做到这一点 div div div div document body keypress function e if e keyCode
  • Kendo Asp.net MVC 网格批处理模式计算列显示不更新

    在 Ajax 批处理模式下使用 Kendo Asp net MVC 网格 具有三列 数量 费率 总计 需要实现对变化的实时计算 编写以下函数来更新数据 function grid change e if e action itemchang
  • 部署不渲染 Kendo UI

    VS2012 asp net MVC4 c 带有 KendoUI 实现的互联网应用程序 最简单的说法是我的网站看起来像这样 开发机器上的本地 像这样部署 我检查了服务器 Kendo UI 论坛 所有论坛都指向图像丢失 我检查了甚至复制了我的
  • Kendo Grid 导出到 Excel 时出错“无法读取 jQuery.js 文件中未定义的属性‘长度’”

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

    我在我的项目中使用 Kendo 菜单 我想在单击所选项目时检索 id 值 我使用了 onSelect 事件 并且能够检索所选项目的文本 如何检索 id 值 您可以使用 HTML5 数据属性来完成此操作 HTML div class k co
  • Kendo UI:TabStrip HtmlHelper 添加部分视图

    在 MVC 3 中的 Kendo UI 内部 我需要为每个选项卡添加部分视图作为该选项卡的内容 这是如何完成的 文档似乎没有显示任何方法 var partialData Html Partial Views Templates p myVi
  • Kendo 网格中的列线不同步

    我的剑道网格有太多列 最初我选择隐藏一些列 但后来我决定用水平滚动条显示所有列 我通过为每列分配宽度来做到这一点 当我这样做时 每列之间的行与标题行不同步 我的意思是 网格数据部分中的行相对于标题行稍微向左移动 为了澄清 当我给出每列的宽度
  • 特定组件的自定义样式应用于 Angular 6 中的所有组件

    ui 网格 我试图将自定义样式应用于特定组件 我想更改该特定组件的字体大小 但是当我在该特定组件 css 文件中编写 css 代码时 并且在加载该组件后 该样式将应用到所有其他组件也 以下是css文件中的代码 k grid td font
  • Kendo UI 树视图父节点不带复选框

    什么方法可以实现显示带有复选框的 TreeView 但我不需要父节点的复选框 仅适用于没有子项的 项目 即 我正在显示文件夹结构 但不希望仅针对文件为任何文件夹设置复选框 Thanks 你应该使用使用复选框模板 http docs kend
  • kendo ui 取消树视图放置

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

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

    我有一个剑道网格 如下所示 Html Kendo Grid
  • 如何更改 Kendo 警报标题?

    我正在使用 Kendo 警报并想更改其标题 默认标题是 url 名称 请参阅下面的链接 图片 我想使用自己的标题 如何更改 图像剑道警报 https i stack imgur com AscDa png 剑道警报 kendo alert
  • 使用 MultiSelect 具有自定义弹出编辑器的 Kendo Grid - 无法获取模型中的选定项目

    所以标题几乎说明了一切 我正在尝试将新的 MultiSelect 小部件合并到网格的自定义弹出编辑器模板中 我正在使用数据属性初始化方法并从远程数据源读取下拉选项 这一切都工作正常 但我无法将所选项目的值放入模型中 当我保存行时 数据数组将
  • 如何使用脚本显示 Kendo Grid 的列菜单

    Kendo Grid 有一个非常漂亮的列上下文菜单 又名 columnMenu 您可以通过右键单击每个列标题来访问它 通过将 Kendo Grid 中的字段设置为以下内容来启用该菜单 列菜单 true 启用 columnMenu 后 它会在
  • 如何获取 Kendo DropDownList 的选定值

    我不知道如何确定在我的剑道下拉列表中选择了哪个项目 我的观点将其模型定义为 model KendoApp Models SelectorViewModel ViewModel 定义为 public class SelectorViewMod
  • Kendo UI - observable、ObservableObject 和 Model 之间的区别

    observable ObservableObject 和 Model 之间有什么区别 谢谢 Model继承自ObservableObject 而ObservableObject又继承自Observable 可观察的 http docs k
  • Kendo ASP.NET MVC 帮助器 Grid 泛型类

    我有以下困境 我正在尝试在部分视图内创建一个 Kendo UI 网格 该网格将与不同类型的对象一起使用 并且可以支持删除或创建等操作 该对象看起来像这样 public class GridViewModel public Type Obje
  • Kendo Ui MVC EditorTemplateName 在 PopUp 编辑模式下不起作用

    我想在 Kendo Ui 网格中使用 EditorTemplateName 作为外键列 当网格编辑模式为内联时 一切正常并且我的模板已加载 但是当将模式更改为弹出时不加载模板 如何修复它 Html Kendo Grid

随机推荐