Export to excel using kendo UI Vue js

[Binu]

Hi All,

            I am trying to export data to excel using kendo grid and vue js .   I am following https://www.telerik.com/kendo-vue-ui/components/grid-native/excel-export/ link

But i am getting below error  

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Object(...) is not a function"

found in

---> <Export> at src/components/Excel/export.vue
       <App> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911
vue.runtime.esm.js?2b0e:1888 TypeError: Object(...) is not a function
    at VueComponent.exportExcel (export.vue?31a1:29)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6911)

 

Below giving my code. and let me know where i am doing wrong?

 

 

<template>
<div>
<button @click="exportExcel" class="k-button">Export Excel</button>
<kendo-grid :height="550" :data-source="info" >
<kendo-grid-column field="Name" title="Name" ></kendo-grid-column>
<kendo-grid-column field="Code" title=Code :width="120" :format="'{0:c}'"></kendo-grid-column>
</kendo-grid>
</div>
</template>
<script>
export default {
name:'export',
data () {
return {
visible: true,
Information : 'absd',
info: null
}
},
mounted () {
axios
.get('https://localhost:44311/api/Module/')
.then(response => (this.info = response.data.lstModuleDetails))
},
methods: {
exportExcel: function () {
saveExcel({
data: this.items,
fileName: "myFile",
columns: [
{ field: 'Code'},
{ field: 'Name', title: 'Name' }
]
});
}
}
}
import saveExcel from '@progress/kendo-vue-excel-export';
import axios from 'axios'
</script>

[Petar]

Hi Binu,

If you are using Vue.js, you can do the Excel export using the built-in "Excel export" functionality of the Grid(Wrapper) component. Here is a demo project demonstrating the usage of this functionality.

If you want to use a separate button out of the Grid, you can check this Excel Export -> Getting Started demo from Grid(native)'s documentation.

Please check the above-linked demos and let me know if you need further assistance in realizing the desired scenario.

Regards,
Petar
Progress Telerik

[Jai]

Hi Petar,

In case if i want to bind my data source object instead of  ":excel-proxy-URL="'https://demos.telerik.com/kendo-ui/service/export'" "

what do i need to go for? please help.

Thanks

[Petar]

Hi Jai,

I am sorry for the belated answer. Did you manage to resolve the issue with the excel-proxy-URL? Here you can find general information about it. Unless you set ForceProxy to true in the export settings, the excel-proxy-URL setting will not be used in most scenarios. The proxy method is used to save the Excel file through the server in the browsers that don't support local file saving (IE 10).

If you want to use own proxyURL, this Server Proxy Implementations article describes how you can implement a server-side proxy for different platforms. Once you have the server-side implementation ready, you have to change the marked in yellow URL

:excel-proxy-URL="'https://demos.telerik.com/kendo-ui/service/export'"

to one that points to your custom proxy.  

Regards,
Petar
Progress Telerik