We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Export to Excel

Thread ID:

Created:

Updated:

Platform:

Replies:

144433 May 6,2019 02:05 PM UTC May 8,2019 11:16 AM UTC Vue 3
loading
Tags: Data Grid
William Morgenweck
Asked On May 6, 2019 04:08 PM UTC

Do you happen to have a small sample of Exporting a Vue Data Grid using javaScript from the Toolbar?  And can you change the download name via code ?  And will I need Server Side code to get this to work?

Thanks

Pavithra Subramaniyam [Syncfusion]
Replied On May 7, 2019 04:41 AM UTC

 
Yes, we have a simple Vue Data Grid exporting sample by using the “toolbarClick” event. You can change the exported filename by passing the custom filename to the exporting method with out any server side code. Please refer to the below code example, documentation link and sample link for more information. 
 
[Vue] 
new Vue({   
              el: '#app', 
              template: ` 
    <div id="app"> 
        <ejs-grid id="Grid" ref="grid" :dataSource="data" :toolbar='toolbar' :toolbarClick='toolbarClick' 
                :allowExcelExport='true' :allowPdfExport='true' height='315px'> 
          <e-columns> 
            <e-column field='OrderID' headerText='Order ID' isPrimaryKey='true' textAlign='Right' width=90></e-column> 
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 
            <e-column field='Freight' headerText='Freight' textAlign='Right' width=90></e-column> 
            <e-column field='ShipCity' headerText='Ship City' width=120></e-column> 
          </e-columns> 
        </ejs-grid> 
    </div> 
`, 
 
  data() { 
    return { 
      data: data.slice(0,20), 
       toolbar: ['ExcelExport', 'PdfExport', 'CsvExport'] 
    }; 
  }, 
   methods: { 
      toolbarClick: function(args) { 
        switch (args.item.text) { 
            case 'PDF Export': 
                this.$refs.grid.pdfExport({fileName:"new.pdf"}); 
                break; 
            case 'Excel Export': 
 
                 this.$refs.grid.excelExport({fileName:"new.xlsx" }); 
                break; 
            case 'CSV Export': 
                 this.$refs.grid.csvExport({fileName:"new.csv"}); 
                break; 
        } 
    } 
      
   }, 
    provide: { 
    grid: [PdfExport, ExcelExport ,Toolbar, page] 
  } 
   
 
}); 
 
 
                              https://ej2.syncfusion.com/vue/documentation/grid/pdf-export/ 
 
Sample               : https://plnkr.co/edit/yHuSET48lagGN8Pw3WTa?p=preview 
 
Regards, 
Pavithra S. 


William Morgenweck
Replied On May 7, 2019 11:25 AM UTC

FANTASTIC-- Works great.  Do you happen to know if there is any type of file size limits?

Pavithra Subramaniyam [Syncfusion]
Replied On May 8, 2019 11:16 AM UTC

 
Thanks for your update. 
 
We don’t have any limitations for Exported file size except the default limitations of Microsoft. Please refer to the below reference link for more information. 
 
 
Regards, 
Pavithra S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon