In this article, we will learn about how to export excel using Vue.js in Kendo Grid. Kendo Grid is one of the most widely used plugin for creating the data grid, so we almost we have the functionality for exporting the excel, we can achieve that easily with this plugin.
Export Excel:
Step 1: Install the following packages in vue.js:
npm install @progress/kendo-vue-excel-export npm install @progress/kendo-vue-grid
Step 2: Open Export_Excel.vue and add the following in it:
<template>
<div>
<button @click="exportExcel" class="k-button">Export Excel</button>
<Grid
:style="{height: '280px'}"
:data-items="items"
:columns = "columns">
</Grid>
</div>
</template>
<script>
import { Grid } from '@progress/kendo-vue-grid';
import { saveExcel } from '@progress/kendo-vue-excel-export';
export default {
components: {
'Grid': Grid
},
data: function () {
return {
items: [],
columns: [
{ field: 'ProductID'},
{ field: 'ProductName', title: 'Product Name' },
{ field: 'UnitPrice', title: 'Unit Price' }
]
};
},
methods: {
exportExcel () {
saveExcel({
data: this.items,
fileName: "myFile",
columns: [
{ field: 'ProductID'},
{ field: 'ProductName', title: 'Product Name' }
]
});
},
createRandomData(count) {
const productNames = ['Chai', 'Chang', 'Syrup', 'Apple', 'Orange', 'Banana', 'Lemon', 'Pineapple', 'Tea', 'Milk'];
const unitPrices = [12.5, 10.1, 5.3, 7, 22.53, 16.22, 20, 50, 100, 120]
return Array(count).fill({}).map((_, idx) => ({
ProductID: idx + 1,
ProductName: productNames[Math.floor(Math.random() * productNames.length)],
UnitPrice: unitPrices[Math.floor(Math.random() * unitPrices.length)]
}));
}
},
mounted() {
this.items = this.createRandomData(100);
}
};
</script>
<style scoped>
.k-button {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
Code in action:
