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. Image for the cookie policy date

Export to Excel

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

3 Replies

PS Pavithra Subramaniyam Syncfusion Team 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. 



WM William Morgenweck May 7, 2019 11:25 AM UTC

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


PS Pavithra Subramaniyam Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon