This is a migrated thread and some comments may be shown as answers.

Export to excel using kendo UI Vue js

3 Answers 327 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Binu
Top achievements
Rank 1
Binu asked on 29 Aug 2019, 04:09 AM

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>

3 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 30 Aug 2019, 12:46 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Jai
Top achievements
Rank 1
answered on 01 Jan 2020, 12:15 PM

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

0
Petar
Telerik team
answered on 10 Jan 2020, 10:13 AM

Hi Jai,

I am sorry for the belated answer. Did you manage to resolve the issue with the excel-proxy-URLHere 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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Binu
Top achievements
Rank 1
Answers by
Petar
Telerik team
Jai
Top achievements
Rank 1
Share this question
or