<分区>
这是我用来将 Kendo 多网格导出到 Excel 的代码，如何导出所有页面
最佳答案
请尝试使用以下代码片段。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<style>
#products .k-grid-toolbar
{
display:none !important;
}
</style>
</head>
<body>
<button id="export" class="k-button"><span class="k-icon k-i-excel"></span>Export to Excel</button>
<div id="products"></div>
<div id="orders"></div>
<script>
// used to sync the exports
var promises = [
$.Deferred(),
$.Deferred()
];
$("#export").click(function(e){
// trigger export of the products grid
$("#products").data("kendoGrid").saveAsExcel();
// trigger export of the orders grid
$("#orders").data("kendoGrid").saveAsExcel();
// wait for both exports to finish
$.when.apply(null, promises)
.then(function(productsWorkbook, ordersWorkbook) {
// create a new workbook using the sheets of the products and orders workbooks
var sheets = [
productsWorkbook.sheets[0],
ordersWorkbook.sheets[0]
];
sheets[0].title = "Products";
sheets[1].title = "Orders";
var workbook = new kendo.ooxml.Workbook({
sheets: sheets
});
// save the new workbook,b
kendo.saveAs({
dataURI: workbook.toDataURL(),
fileName: "ProductsAndOrders.xlsx"
})
});
});
$("#products").kendoGrid({
toolbar: ["excel"],
excel: {
allPages: true
},
dataSource: {
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 20
},
height: 550,
pageable: true,
excelExport: function(e) {
e.preventDefault();
promises[0].resolve(e.workbook);
}
});
$("#orders").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
pageSize: 20,
serverPaging: true
},
height: 550,
pageable: true,
columns: [
{ field:"OrderID" },
{ field: "ShipName", title: "Ship Name" },
{ field: "ShipCity", title: "Ship City" }
],
excelExport: function(e) {
e.preventDefault();
promises[1].resolve(e.workbook);
}
});
</script>
</body>
</html>
如有任何疑问，请告诉我。
关于javascript - Kendo UI 多网格 Excel 导出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27644041/
相关文章：
javascript - Three.js - TypeError : THREE. 场景不是构造函数
javascript - 如何在操作处理程序中获取原始事件对象？
javascript - Kendo UI 甘特图刷新数据源
javascript - 剑斗 : Get tab name when click on tab in kendoui
javascript - 对象作为 React 子对象无效(找到 : [object Promise])
javascript - 使用 jQuery draggable 将元素拖到可滚动的 div 之外
javascript - jQuery ui 可排序 : Toggle enable - disable sortable on the lists