Getting Started with Excel Export
This guide demonstrates how to use the Kendo UI for jQuery Workbook API to generate and export spreadsheets.
After the completion of this guide, you will achieve the following result:
<button id="export">Generate and Export</button>
<script>
var workbook = new kendo.ooxml.Workbook({
sheets: [
{
// The column settings (width).
columns: [
{ autoWidth: true },
{ autoWidth: true }
],
// Th title of the sheet.
title: "Customers",
// The rows of the sheet.
rows: [
// The first row (header).
{
cells: [
// The first cell.
{ value: "Company Name" },
// The second cell.
{ value: "Contact" }
]
},
// The second row (data).
{
cells: [
{ value: "Around the Horn" },
{ value: "Thomas Hardy" }
]
},
// The third row (data).
{
cells: [
{ value: "B's Beverages" },
{ value: "Victoria Ashworth" }
]
}
]
}
]
});
$("#export").on("click", () => {
workbook.toDataURLAsync().then(function(dataURL) {
kendo.saveAs({
dataURI: dataURL,
fileName: "Test.xlsx"
});
});
});
</script>
1. Requirements
Starting with v2023.3.1115 the JSZip library is no longer distributed with the rest of the Kendo UI for jQuery scripts. You must use one of the official distribution channels such as
unpkginstead.
To take full advantage of the Excel Export feature, download the JSZip library and include the file before the Kendo UI JavaScript files.
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js"></script>
JSZip is part of the Kendo UI distribution and is also available through the Kendo UI CDN:
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
- If you do not include JSZip in the page, Kendo UI will raise a runtime exception.
When you use JSZip in scenarios where the packages are loaded from NPM, explicitly assign the JSZip object to a field in the window object. To properly load JSZip in the application:
- Install the library and save it to the
package.jsonfile by runningnpm install jszip --save. - Import the library in the module where it will be used through
import JSZip from 'jszip'. - Assign the library object to a field of the
windowby settingwindow.JSZip = JSZip.
Compatibility with Other Libraries
- GlobalizeJS—If you want to use GlobalizeJS in your project, include it after the Kendo UI scripts.
- RequireJS—JSZip requires some extra initialization code to work with RequireJS. For more information on using RequireJS with the Kendo UI Excel export functionality, refer to the related article.
2. Instantiate a Workbook
First, instantiate a kendo.ooxml.Workbook.
var workbook = new kendo.ooxml.Workbook({});
3. Configure the Workbook Settings
The workbook has an array of sheets. Sheets have rows and rows have cells.
sheets: [
{
// The column settings (width).
columns: [
{ autoWidth: true },
{ autoWidth: true }
],
// Th title of the sheet.
title: "Customers",
// The rows of the sheet.
rows: [
// The first row (header).
{
cells: [
// The first cell.
{ value: "Company Name" },
// The second cell.
{ value: "Contact" }
]
},
// The second row (data).
{
cells: [
{ value: "Around the Horn" },
{ value: "Thomas Hardy" }
]
},
// The third row (data).
{
cells: [
{ value: "B's Beverages" },
{ value: "Victoria Ashworth" }
]
}
]
}
]
4. Convert the Workbook to Data URI
Call the toDataURL or toDataURLAsync methods of the workbook to get the output Excel file as a data URI.
workbook.toDataURLAsync().then(function(dataURL) {
});
5. Save the Generated Excel File
Call the kendo.saveAs method to save the Excel file on the client machine.
workbook.toDataURLAsync().then(function(dataURL) {
kendo.saveAs({
dataURI: dataURL,
fileName: "Test.xlsx"
});
});