How to export the pivot grid data to Excel? One trick to teach you

Kendo UI for jQuery R3 2020 SP2 trial version download

Kendo UI is the final collection of JavaScript UI components with jQuery, Angular, React and Vue libraries. No matter which JavaScript framework you choose, you can quickly build high-performance responsive web applications. Through customizable UI components, Kendo UI can create data-rich desktop, tablet and mobile web applications. With responsive layout, powerful data binding, cross-browser compatibility and instant-to-use themes, Kendo UI accelerates development time by 50%.

Excel export

PivotGrid enables you to export its content to Excel.

By default, Excel export will be enabled when kendo.ooxml.min.js is loaded on the page. kendo.all.min.js and kendo.web.min.js contain kendo.ooxml.min.js.

To start the Excel export with code, call the saveAsExcel method.

For more information, please refer to the following resources:

Export content

By default, PivotGrid exports current data with applied sorting and filtering functions. PivotGrid does not export current CSS themes in an Excel file.

During the export to Excel, the dataCellTemplate , columnHeaderTemplate and rowHeaderTemplate options are not used .

Custom appearance

excelExport allows to customize the generated Excel document, and the workbook event parameter exposes the generated Excel workbook configuration.

Use templates

PivotGrid does not use dataCellTemplate, columnHeaderTemplate and rowHeaderTemplate during Excel export, but only exports its data, because the template may contain arbitrary HTML that cannot be converted to Excel column values.

Troubleshooting

Causes "JSZip Is Not Found" JavaScript error

If the JSZip JavaScript library is not found, an exception will be thrown when clicking the Export to Excel button or calling saveAsExcel. To work around this problem, include JSZip in the page.

Excel Export does not work in Internet Explorer and Safari

Internet Explorer 10 and earlier versions and Safari do not support file saving. These browsers need to implement a server proxy. To specify the URL of the server proxy, set the proxyURL option.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "/proxy"
},
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 7
},
sortable: true,
pageable: true,
columns: [
{ width: 300, field: "ProductName", title: "Product Name" },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock" }
]
});
</script>

For the latest news of Kendo UI, please follow Telerik Chinese website!

Guess you like

Origin blog.csdn.net/AABBbaby/article/details/112857817