Export to Excel

[William Morgenweck]

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]

Hi William, 

 

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] 

  } 

   

 

}); 

 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/excel-exporting/ 

                              https://ej2.syncfusion.com/vue/documentation/grid/excel-exporting/#file-name-for-exported-document 

                              https://ej2.syncfusion.com/vue/documentation/grid/pdf-export/ 

 

Sample               : https://plnkr.co/edit/yHuSET48lagGN8Pw3WTa?p=preview 

 

Regards, 

Pavithra S. 

[William Morgenweck]

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

[Pavithra Subramaniyam]

Hi William, 

 

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. 

 

Reference link: https://support.office.com/en-us/article/Excel-specifications-and-limits-1672b34d-7043-467e-8e27-269d656771c3 

 

Regards, 

Pavithra S.