Excel Export

The native Vue Grid by Kendo UI provides inbuilt options for exporting its data to Excel.

Getting Started

To enable the Excel export:

  1. Install the kendo-vue-excel-export package.

    npm install @progress/kendo-vue-excel-export
  2. Import the ExcelExport component in your Vue Application.

    import { saveExcel } from '@progress/kendo-vue-excel-export';

The following example demonstrates the basic implementation of the Excel export functionality of the Grid. The Grid uses a button click handler to trigger the saveExcel method. Note how the exported columns and the file name are defined to customize the exported file.

<div id="vueapp" class="vue-app">
 <button @click="exportExcel" class="k-button">Export Excel</button>
        <Grid
            :style="{height: '280px'}"
            :data-items="items"
            :columns = "columns">
        </Grid>
</div>
import { Grid } from '@progress/kendo-vue-grid';
import { saveExcel } from '@progress/kendo-vue-excel-export';
import { process, filterBy } from '@progress/kendo-data-query';


Vue.component('Grid', Grid);
new Vue({
    el: '#vueapp',
    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(1000);
    }
});

In this article